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

Here's a creative idea using box-shadow:

#header {
    background-image: url("apple.jpg");
    box-shadow: inset 0 0 99999px rgba(0, 120, 255, 0.5);
}

What's happening

1. The background sets the background for your element.

2. The box-shadow is the important bit. It basically sets a really big shadow on the inside of the element, on top of the background, that is semi-transparent