1

I have set background color and background image for a div. How can I add the opacity to background image so that the background color become visible too?

Here's my code:

CSS:

.box{
    background-color: green;
    background-image: url('http://farm8.staticflickr.com/7308/12305815623_3d1614042a_n.jpg');
    background-repeat: no-repeat;  
    font-size: 40px;
    width: 320px;
    height: 200px;    
}

HTML:

<div class="box">
    <div class="wrap">Some text</div>    
</div>

Demo: http://jsfiddle.net/Yv6T3/

user2738640
  • 1,207
  • 8
  • 23
  • 34
  • You can do it with a little work around. See this: [Transparent Background Images](http://css-tricks.com/snippets/css/transparent-background-images/) – Itay Feb 05 '14 at 10:56
  • This has been answered gazillion times: http://stackoverflow.com/search?q=css+background+opacity – Joonas Feb 05 '14 at 11:23

3 Answers3

3

I would suggest a partially transparent PNG is the best solution. It doesn't require any hacks, works on all platforms and degrades nicely even on IE6

Exelian
  • 5,749
  • 1
  • 30
  • 49
0

There's a several CSS properties for adding opacity:

opacity: 0.2; /* Standard property, for all modern browsers */
filter: alpha(opacity=20); /* For old IE */

Look at the updated fiddle: http://jsfiddle.net/Yv6T3/1/

Alexander Tokarev
  • 2,743
  • 2
  • 20
  • 21
  • Not sure this is what they are after - they only want the opacity to apply to the image, not the whole div. – Wez Feb 05 '14 at 10:59
  • Yes, this is not what I'm looking for. I only want to add opacity to the background image, not the whole div. – user2738640 Feb 05 '14 at 11:03
0

have been asked already and the answer is pretty nice: How do I give text or an image a transparent background using CSS?

just use 

background-color:rgba(255,0,0,0.5);

where 0.5 is your transparency.

Of course, doesn't work everywhere, but for sure does in all modern browsers.

Community
  • 1
  • 1
smnbbrv
  • 23,502
  • 9
  • 78
  • 109