CODEWITHSUNDEEP
htmlcss
Tintin81
Tintin81

Reputation: 10207

How to blend an image with a solid colour in CSS?

I would like to blend an image with a solid colour using CSS. How can this be done?

This is what I've got so far: 

header {
  width: 900px;
  height: 60px; 
  background-image: url(../images/banner.jpg);
  background-color: rgba(51,102,153,0.5);
}

It's not working though!

I just can't get my head around this.

Thanks for any help!

Upvotes: 0

Views: 9335

Answers (3)

Damien
Damien

Reputation: 1217

The currently accepted answer and it's alternative indeed work. But both use background-image's for actual content. This method uses an img tag.

HTML

<div class="blend">
<img src="http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg" alt=" " />
</div>​

CSS

.blend {
    background: red;
    display: inline-block;
}

.blend img {
    opacity: 0.5;
}

​See this fiddle.

Upvotes: 6

Stephan B&#246;nnemann-Walenta
Stephan B&#246;nnemann-Walenta

Reputation: 3403

The currently accepted answer works, but it's semantically incorrect and would benefit from some optimisations.

You can use the pseudo after element for this, so you don't need to introduce additional markup for this. So the markup remains this:

<div id="content"></div>

The CSS is verbose, but more expressive. I don't like that the "wrapper" contains the actual content (image), while the "content" is just a simple color. Also there is no need to fade the whole div, but you can use the alpha channel for the color.

#content {
    position: relative;
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
    width: 477px;
    height: 318px;
}
#content:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255,0,0,0.5);
    pointer-events: none;
}

​jsfiddle

Upvotes: 1

iappwebdev
iappwebdev

Reputation: 5910

Use two divs, see this fiddle:

HTML:

<div id="wrapper">
    <div id="content"></div>  
</div>

CSS:

#wrapper
{
    background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
}

#content
{
    background-color: yellow;
    opacity: 0.5;
    width: 477px;
    height: 318px;
}

Upvotes: 3

Related Questions