Change background of div and image-CodePudding

As the title suggests, I wanted to add a background both to the image and the div itself. I see it's being used on amazon but can't seem to figure out the trick behind it. What I mean is, the image has a white background, but the image as it's been applied onto the div doesn't show that white space. Like so:

Image with white background:

Image being rendered onto the div:

Here is what I have tried so far:

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  border-radius: 4px;
}

.image-block {
  background: red;
  margin: auto;
}

.image-block img {
  width: 100%
  height: 100%;
}

.information {
  padding: 10px;
}

.information p {
  font-size: 0.875rem;
  line-height: 1.5;
}

<div >
  <div >
    <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg">
  </div>
  <div >
    <p>Logitech M510 Wireless Computer Mouse for PC with USB Unifying Receiver - Graphite</p>
    <p>Price: $100</p>
  </div>
</div>

You can see a bit of the background: red; just under the image.

CodePudding user response：

If you want a transparent image background you should use a PNG image, then for the red background just remove the background color from the image-block

.image-block {
    margin: auto;
}

CodePudding user response：

The problem here is that the first image you posted has a white background, but contrary to your assumption the second image doesn't have a white background, it has a transparent background and that makes all the difference.
When wrapping around an image with a transparent background a div element will be displayed on the transparent background. That's likely what is shown in the second image.
Then there's the question, How do you use an image with a transparent background?
The image you are using is in .jpg format that doesn't support transparent background, you can use either .png or the .svg for that. It should work without changing the code other than the image import.

If you are always getting images with white background a possible work around is to use Canvas API and edit the image yourself with JavaScipt, which works but is performance intensive. There's a nice answer about it on SO: https://stackoverflow.com/a/11472435/13970434

CodePudding user response：

you should use png image and then whatever background color you need can be given to div wrapping the image.

CodePudding user response：

With a .jpg image you may cheat as this : I'm sorry for my English, I'm not sure to understand what's your goal...

        .grid-wrapper {
          display: grid;
          grid-template-columns: 1fr 2fr;
          background-color: #ffffff;
          box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
          border-radius: 4px;
        }

        .image-block {
          background-color: red;
          margin: auto;
          padding:20px;
        }
        
        .image-block img {
          
        }
        .image-container{
          background-color: white;
          padding:20px;
        }
        .information {
          padding: 10px;
        }

        .information p {
          font-size: 0.875rem;
          line-height: 1.5;
        }

<div >
  <div >
      <div >
    <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg" alt="image">
      </div>
  </div>
  <div >
    <p>Logitech M510 Wireless Computer Mouse for PC with USB Unifying Receiver - Graphite</p>
    <p>Price: $100</p>
  </div>
</div>