CODEWITHSUNDEEP
htmlcss
user2738640
user2738640

Reputation: 1227

Add opacity to background image

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/

Upvotes: 1

Views: 168

Answers (3)

smnbbrv
smnbbrv

Reputation: 24591

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.

Upvotes: 0

Alexander Tokarev
Alexander Tokarev

Reputation: 2763

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/

Upvotes: 0

Exelian
Exelian

Reputation: 5888

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

Upvotes: 3

Related Questions