CODEWITHSUNDEEP
htmlcssreactjswebjsx
Shahrear Bin Amin
Shahrear Bin Amin

Reputation: 1115

Background image in div is not taking entire view

I'm working on a e-commerce platform. I've to show SoldOut image over the product image if all total count is zero. Here is my css for sold out products.

  &__imageSoldOut {
    background-color: green;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 15rem;
    object-fit: cover;

    img {
      object-fit: contain;
      max-width: 70%;
    }

    @media (max-width: $small-screen) {
      height: 210px;
    }
  }

I want my product image in the background will cover the entire view just like the left available products, only soldout image shown as overlay, here the green view will be covered by the background image. Here is my react jsx

        <div
          className="product-list-item__imageSoldOut"
          style={{
            backgroundImage: `url(${(product.thumbnail.url &&
              product.thumbnail.url) ||
              "images/no-photo.svg"})`,
          }}
        >
          <img src={soldOutThumb} />
        </div>

enter image description here

Upvotes: 1

Views: 511

Answers (3)

M Muzzammil ijaz
M Muzzammil ijaz

Reputation: 178

Try giving it flex:1 also tryobject-fit: fill

Upvotes: 0

abdullahQureshee
abdullahQureshee

Reputation: 340

In your JSX, remove the backgroundImage and use background and write the url() along with cover. The cover style will fill the div via zooming on the image and cropping/clipping the overflowing.

In code it should look like this: background: url() cover

Upvotes: 1

henrik hildebrand
henrik hildebrand

Reputation: 71

You can set backgroundSize (https://www.w3schools.com/cssref/css3_pr_background-size.asp) to be 100% of height in this case to not skew the image or fill it both width and height wise

       <div
          className="product-list-item__imageSoldOut"
          style={{
            backgroundImage: `url(${(product.thumbnail.url &&
              product.thumbnail.url) ||
              "images/no-photo.svg"})`,
            backgroundSize: "auto 100%"
          }}
        >
          <img src={soldOutThumb} />
        </div>

backgroundSize: "[width] [height]"

Upvotes: 1

Related Questions