Question

I have a couple of divs, each with a background image. I’m using responsive and adaptive CSS, and when my divs’ widths gets less than a certain size(760px btw), the text and some tables with styling becomes hard to read/see with the background image moving in behind them(the background image is on the far right of the text/tables and unobtrusive if the width is above 760px…). So when the width of the viewport gets to 760px and less, I only want the background image to have an opacity…

How do I do that?

So my CSS starts like this:

@media screen and (max-width: 760px){
   background: #cdcdcd url("/images/back.jpg") no-repeat top right;
    /*How do I set the opacity of only the background?*/
} 

Answer 1

You can not change the opacity of a background image, unless you move it to a separate container.

All you can change is the opacity of BG color using rgba():

background: rgba(0, 0, 0, .5);