0

Hi I was wondering if someone could point me in the right direction, i'm still learning really, and I am looking to increase the opacity of a background colour on a div element, but it has added an opacity to all of my images too:

Please see example: https://cdn.shopify.com/s/files/1/0881/1476/files/bernard.png

What I want is to apply a grey opaque background to the wrapper, but not having it affecting my images or text.

Here is the CSS: https://cdn.shopify.com/s/files/1/0881/1476/files/css1.png

Any help would be much appreciated - thanks.

Stephen.

Steph
  • 3
  • 3
  • 1
    Why don't you post your css instead of a screenshot? – jcuenod Jun 05 '15 at 09:44
  • I don't know what exactly is your wrapper, but I guess the problem is that adding an opacity to the wrapper makes its content opaque as well. – Lunaetic Jun 05 '15 at 09:51
  • Try this question to see if it helps. [This question explains it good.](http://stackoverflow.com/questions/5135019/css-opacity-only-to-background-color-not-the-text-on-it?rq=1) – hendrikdotse Jun 05 '15 at 09:48

3 Answers3

0

You should use background: rgba(0-255,0-255,0-255,0-1).

Opacity affects all child elements if you apply it to the parent.

Daniel Cardoso
  • 478
  • 3
  • 14
0

To use opacity on the background only, you don't use opacity because this will also affect all of the children of the container you apply it to.

To use opacity only on the background color, you'll have to use color definition in rgba() format. For example if you want white background-color and opacity of 0.5, this would be the rgba:

rgba(255,255,255,0.5);

In your css example, put

background-color: rgba(225,222,222,0.6);

and remove the 

opacity: 0.6;
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Fantastic! Thanks for the help everyone! It has also being dynamically referenced using Ruby so had to figure that one out too! But that's it sorted... Thanks again for the help! – Steph Jun 05 '15 at 14:05
0

Try like this:

.wrapper{
background:rgba(0,0,0,.5) url(...);
}

Dont use opacity for the parent div, instead use rgba() to make transparent Background, this dont affect all the child elements.

G.L.P
  • 7,119
  • 5
  • 25
  • 41