Semi-transparent color layer over background-image?

css background-image background-color
Marc picture Marc · Feb 7, 2012 · Viewed 469.9k times · Source

I have a DIV and I would like to put a pattern as background. This pattern is gray. So to make it a little more nice, I would like to put a light transparent color "layer" over. Below is what I tried but which did not work. Is there a way to put the colored layer over the background image?

Here's my CSS:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Answer

BevansDesign picture BevansDesign · Jun 6, 2014

I know this is a really old thread, but it shows up at the top in Google, so here's another option.

This one is pure CSS, and doesn't require any extra HTML.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

There are a surprising number of uses for the box-shadow feature.

Related questions

CSS: background image on background color

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before. So if …

Read More
How to add a color overlay to a background image?

I have seen this question a lot both on SO and the Web. But none of them has been what I am looking for. How do I add a color-overlay to a background image using CSS only? Example HTML: <…

Read More
How to apply a CSS filter to a background image

I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts: background-image: url("whatever.jpg"); I want to apply a CSS 3 …

Read More