3

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 with white background

Image being rendered onto the div:

Image rendered on 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 class="grid-wrapper">
  <div class="image-block">
    <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg">
  </div>
  <div class="information">
    <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.

Parit Sawjani
  • 729
  • 8
  • 24
  • 1
    Usually and ideally pictures have no background (=transparent) and take whatever background is set on its parent. – Lain Dec 22 '22 at 12:33
  • 1
    The image has a white background (.jpg doesn't preserve transparent background) – Sfili_81 Dec 22 '22 at 12:34
  • 1
    You`re using an "JPG" Format, which cannot have no background. Try to export it as an "PNG" Format an remove the Background there. – Yannick Dec 22 '22 at 12:34
  • The images amazon is using are moreover a png or SVG image which has no background, but your image has that's why it is giving you a white background. You can remove your image's background color using any online tool and then try your code, it would work. – Neha Soni Dec 22 '22 at 12:35
  • @Sfili_81 I'm taking the image directly from amazons site which shows an jpg extension being used – Parit Sawjani Dec 22 '22 at 12:38
  • 1
    https://stackoverflow.com/questions/11472273/how-to-edit-pixels-and-remove-white-background-in-a-canvas-image-in-html5-and-ja – mahdi gholami Dec 22 '22 at 12:41
  • Thanks for the responses, so my options are to use png or to use a image processing framework. Well appreciated. – Parit Sawjani Dec 22 '22 at 12:45
  • @Sfili_81 that is just the file extension. The file itself has the response type `image/webp`. – Lain Dec 22 '22 at 12:51

4 Answers4

0

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;
}
amel
  • 1,098
  • 2
  • 4
  • 17
0

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

André
  • 1,602
  • 2
  • 12
  • 26
  • This is true, but i'm imagining a scenario where a vendor would be uploading images from a cms so the chances of them being careful about the type of image (png or svg) they upload is low. So I was trying to find a trick that would cover up that flaw. – Parit Sawjani Dec 22 '22 at 13:38
  • You need to edit the image then, did you try Canvas API? You can also use Gimp or other programs with UI. I edit my question with a suggestion. – André Dec 22 '22 at 14:30
  • Editing is fine for a technical user like me, but in the case of a customer I highly doubt they would edit the image. The Canvas API looks like an interesting solution I will definitely check it out. – Parit Sawjani Dec 23 '22 at 07:43
0

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

Ankit
  • 607
  • 2
  • 9
  • 16
0

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 class="grid-wrapper">
  <div class="image-block">
      <div class="image-container">
    <img src="https://m.media-amazon.com/images/I/61xgpXecLML._AC_UY218_.jpg" alt="image">
      </div>
  </div>
  <div class="information">
    <p>Logitech M510 Wireless Computer Mouse for PC with USB Unifying Receiver - Graphite</p>
    <p>Price: $100</p>
  </div>
</div>
tatactic
  • 1,379
  • 1
  • 9
  • 18