How to overlay image with color in CSS?

Question

Objective

I want a color overlay on this header element. How can I do this with CSS?

Code

HTML

Answer 1

If you don't mind using absolute positioning, you can position your background image, and then add an overlay using opacity.

div {
    width:50px;
    height:50px;
    background:   url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif');
    position:absolute;
    left:0;
    top:0;
}

.overlay {
   background:red;
   opacity:.5;
}

See here: http://jsfiddle.net/4yh9L/