How can I apply background image to card so it would be partly cropped?

user_11826485 0
Viewed 45

I have a prototype that consists of 3 cards and the question is how to apply a background image to any them? I've tried doing it by the background-image property, but it didn't work. Then I've tried to make this image stick to the right border of the card as <img> tag, but id didn't work either. Are there any solutions.

enter image description here

All I have is this:

enter image description here

This is HTML and CSS code:

import React from 'react'
import styles from './AboutInfo.module.css'


export default function AboutInfo({ name, number, email, color }) {

    return (
        <div
            className={styles.infoContainer}
            style={{
                background: color === "green" ? 'url("/images/backgrounds/firGreen.png")'
                : 'url("/images/backgrounds/firRed.png")'
            }}
        >
            <p className={styles.name} style={{color: color === "green" ? "#00BC71" : "#E77B54"}}>{name}</p>
            <div className={styles.topSection}>
                <p className={styles.header}>Phone number</p>
                <p className={styles.number}>{number}</p>
            </div>
            <div className={styles.section}>
                <p className={styles.header}>Email</p>
                <p className={styles.email}>{email}</p>
            </div>
        </div>
      )
}

.infoContainer {
    width: 480px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 0 0 25px 0 var(--shadow);
    -webkit-box-shadow: 0 0 25px 0 var(--shadow);
    -moz-box-shadow: 0 0 25px 0 var(--shadow);
}

.name {
    margin-left: 10%;
    font-weight: bold;
    font-size: 2.2em;
}

.topSection {
    margin: -20px 0 0 10%;
}

.section {
    margin: 30px 0 25px 10%;
}

.header {
    font-size: 1.2em;
    font-family: Montserrat medium, sans-serif;
    color: var(--text-subtitle);
    margin: 0;
}

.number, .email {
    margin: 10px 0 0 0;
    font-size: 1.5em;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    color: var(--text);
}
reactjs css html
2 Answers

Container:

position: relative;
overflow: hidden;

Image tag inside the container:

position: absolute;
right: 50px;
bottom: 50px;

(Adjust the pixel values)

user_50787600

I recommend splitting your container from your image. Add position: relative to your container and add the image inside the container.

import styles from './AboutInfo.module.css'


export default function AboutInfo({ name, number, email, color }) {

    return (
        <div
            className={styles.infoContainer}>
            {
              color === 'green' ?
              <img src={require('/images/backgrounds/firGreen.png')} style={styles.imageCard} />
              :
              <img src={require('/images/backgrounds/firRed.png')} style={styles.imageCard} />
            }
            <p className={styles.name} style={{color: color === "green" ? "#00BC71" : "#E77B54"}}>{name}</p>
            <div className={styles.topSection}>
                <p className={styles.header}>Phone number</p>
                <p className={styles.number}>{number}</p>
            </div>
            <div className={styles.section}>
                <p className={styles.header}>Email</p>
                <p className={styles.email}>{email}</p>
            </div>
        </div>
      )
}

.infoContainer {
    position: relative;
    width: 480px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 50px;
    box-shadow: 0 0 25px 0 var(--shadow);
    -webkit-box-shadow: 0 0 25px 0 var(--shadow);
    -moz-box-shadow: 0 0 25px 0 var(--shadow);
}

.imageCard{
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.name {
    margin-left: 10%;
    font-weight: bold;
    font-size: 2.2em;
}

.topSection {
    margin: -20px 0 0 10%;
}

.section {
    margin: 30px 0 25px 10%;
}

.header {
    font-size: 1.2em;
    font-family: Montserrat medium, sans-serif;
    color: var(--text-subtitle);
    margin: 0;
}

.number, .email {
    margin: 10px 0 0 0;
    font-size: 1.5em;
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    color: var(--text);
}

user_112044000
Related