CSS to change background color in image container-CodePudding

Need a CSS to set the background color of image containers to white. I think my snag is how to call out the specific item to apply the CSS to. Below works on the site background but not the image containers.

body {
  background-color: white;
}

I believe this is the box object I'm trying to adjust: document.querySelector("body > div.wrapper > div > div.products.row > div.col-sm-12.col-md-10 > div:nth-child(1) > div.image-wrap")

The gray bars above and below the bike images here need to be white instead of gray: https://www.hermosacyclery.com/bikes/electra/cruiser-attitude.

Thanks, Steve

CodePudding user response：

You will need to target the img tag directly in order to apply the desired style. You can add this CSS to solve the issue:

    .products .product .image-wrap img {
       background-color: #ffffff; 
    }

CodePudding user response：

In addition to what @Edgar has said about using

.products .product .image-wrap img {
   background-color: #ffffff; 
}

You also need to be aware of the "cascading" part of CSS. There is another active CSS entry that is overriding the background colour.

.slider img,
.products .product .image-wrap img,
.categories .category img, 
.zoombox .images a img, .zoombox .thumbs a img {
  background-color: #f7f7f7;
}

Specifically the .products .product .image-wrap img, part of that selector group.