Modify the background of a div and an image

Question

Modify the background of a div and an image

My goal is to add a background to both the image and the div itself, similar to what I've seen on Amazon. However, I'm struggling to achieve this effect where the white background of the image doesn't show when applied onto the div:

Image with white background:

https://i.sstatic.net/QbX9R.png

Image being rendered onto the div:

https://i.sstatic.net/TAmLv.png

This is what I have attempted 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>

The issue I'm facing is that the background: red; is partially visible under the image.

javascript html css

Answer 1

Answer №1

To achieve a see-through image background, opt for a PNG format image. For a red background effect, simply eliminate the solid background color from the image-block

.image-block {
    margin: auto;
}

Answer 2

To achieve a see-through image background, opt for a PNG format image. For a red background effect, simply eliminate the solid background color from the image-block

.image-block {
    margin: auto;
}

Answer 3

Answer №2

The issue at hand is that the initial image you shared features a white background, whereas the subsequent image actually boasts a transparent background - a crucial distinction to note.
When an image with a transparent background is enveloped by a div element, it will appear against the transparency of the background, likely what's depicted in the second image.
This leads us to ponder how one can effectively utilize an image with a transparent backdrop.
The image currently being utilized is in .jpg format, which does not inherently support transparency; for this purpose, either .png or .svg formats must be used. Making this adjustment should ideally function without necessitating any alterations to the code other than updating the imported image.

If you consistently encounter images with white backgrounds, a potential workaround involves leveraging Canvas API and modifying the image manually using JavaScript, although this approach may pose performance challenges. A helpful solution addressing this method can be found on Stack Overflow:

Answer 4

The issue at hand is that the initial image you shared features a white background, whereas the subsequent image actually boasts a transparent background - a crucial distinction to note.
When an image with a transparent background is enveloped by a div element, it will appear against the transparency of the background, likely what's depicted in the second image.
This leads us to ponder how one can effectively utilize an image with a transparent backdrop.
The image currently being utilized is in .jpg format, which does not inherently support transparency; for this purpose, either .png or .svg formats must be used. Making this adjustment should ideally function without necessitating any alterations to the code other than updating the imported image.

If you consistently encounter images with white backgrounds, a potential workaround involves leveraging Canvas API and modifying the image manually using JavaScript, although this approach may pose performance challenges. A helpful solution addressing this method can be found on Stack Overflow:

Answer 5

Answer №3

It is recommended to utilize a PNG image format and then assign the desired background color to the div element containing the image.

Answer 6

It is recommended to utilize a PNG image format and then assign the desired background color to the div element containing the image.

Answer 7

Answer №4

When dealing with a .jpg image, there are ways to manipulate it, like this example: Apologies for any language barriers; I'm having trouble grasping your objective...

        .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>

Answer 8

When dealing with a .jpg image, there are ways to manipulate it, like this example: Apologies for any language barriers; I'm having trouble grasping your objective...

        .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>

Modify the background of a div and an image

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for resizing a 100% div without displaying vertical scrollbars in the browser

What is the best way to ensure my <h5> element fits perfectly inside its parent div vertically?

Working with Node.js: Implementing a method callback within a loop

Issue with Vue: Calling method instantly when using :mouseover in v-for within a component

What is the proper way to document JSDoc in JavaScript specifically for the TypeScript Compiler?

Is there a way to fill select boxes with multiple values?

Struggling to grasp the concept of using z-index in CSS

Preventing the use of special characters in URLs using JavaScript

When a function is triggered automatically, it sends back an HTML response by default, whereas executing it manually will yield

Ensure Angular Reactive Forms do not include empty fields when submitting the form

Tips for importing a canvas using a fabric.Group from a JSON file?

Confirming if the value is an array using jQuery

Combining results and tallying occurrences

Flask Session Persistence Issue: Postman Successful, Javascript Fails

Scroll the div back to the top when the form is submitted

Using Vue's computed property setter with an object as a prop

Transferring reference from a parent component to a child component

Displaying SVGs in the <object> tag within an Angular 2 component is not functioning properly in Internet Explorer

What is the best way to resize an element such as an image?

What is the best way to align a checkbox and text in the same row within a Mailchimp embedded form?