[css] Semi-transparent color layer over background-image?

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);

Why so complicated? Your solution was almost right except it's a way easier to make the pattern transparent and the background color solid. PNG can contain transparencies. So use photoshop to make the pattern transparent by setting the layer to 70% and resaving your image. Then you only need one selector. Works cross browser.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

This are the basic. A usage example follows where I switched from background to background-image but both properties works the same.

body { margin: 0; }_x000D_
div {_x000D_
   height: 110px !important;_x000D_
   padding: 1em;_x000D_
   text-transform: uppercase;_x000D_
   font-family: Arial, Helvetica, sans-serif;_x000D_
   font-weight: 600;_x000D_
   color: white;_x000D_
   text-shadow: 0 0 2px #333;_x000D_
}_x000D_
.background {_x000D_
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */_x000D_
   }_x000D_
.col-one {_x000D_
  background-color: rgb(255, 255, 0);_x000D_
}_x000D_
.col-two {_x000D_
  background-color: rgb(0, 255, 255);_x000D_
}_x000D_
.col-three {_x000D_
  background-color: rgb(0, 255, 0);_x000D_
}

<div class="background col-one">_x000D_
 1. Background_x000D_
</div> _x000D_
<div class="background col-two">_x000D_
 2. Background_x000D_
</div> _x000D_
<div class="background col-three">_x000D_
 3. Background_x000D_
</div> 

PLEASE WAIT A MINUTE! IT TAKES SOME TIME TO LOAD THE EXTERNAL PATTERNS.

This website seems to be rather slow...

Try this. Works for me.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Here is a more simple trick with only css.

<div class="background"> </div>_x000D_
    <style>_x000D_
    .background {_x000D_
      position:relative;_x000D_
      height:50px;_x000D_
      background-color: rgba(248, 247, 216, 0.7);_x000D_
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); _x000D_
    }_x000D_
_x000D_
    .background:after {_x000D_
        content:" ";_x000D_
        background-color:inherit;_x000D_
        position: absolute;_x000D_
        top: 0;_x000D_
        left: 0;_x000D_
        width: 100%;_x000D_
        height: 100%; _x000D_
    }_x000D_
_x000D_
    </style>

You can also use a linear gradient and an image: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

This is because the linear gradient function creates an Image which is added to the background stack. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

You can also add opacity to your overlay color.

Instead of doing

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

You can do:

background: url('../img/bg/diagonalnoise.png');

Then create a new style for the opacity color:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Change the opacity to whatever number you want below 1. Then you make this color style the same size as your image. It should work.

Another one with an SVG as inline overlay-image (note: if you use # inside the svg-code you have to urlencode that!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

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.

I've used this as a way to both apply colour tints as well as gradients to images to make dynamic overlaying text easier to style for legibility when you can't control image colour profiles. You don't have to worry about z-index.

HTML

<div class="background-image"></div>

SASS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Hope it helps

I simply used background-image css property on the target background div.
Note background-image only accepts gradient color functions.
So I used linear-gradient adding the same desired overlay color twice (use last rgba value to control color opacity).

Also, found these two useful resources to:

1. Add text (or div with any other content) over the background image: Hero Image
2. Blur background image only, without blurring the div on top: Blurred Background Image

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

From CSS-Tricks... there is a one step way to do this without z-indexing and adding pseudo elements-- requires linear gradient which I think means you need CSS3 support

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

You can use a semitransparent pixel, which you can generate for example here, even in base64 Here is an example with white 50%:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• without uploading

• without extra html

• i guess the loading should be quicker than box-shadow or linear gradient

See my answer at https://stackoverflow.com/a/18471979/193494 for a comprehensive overview of possible solutions:

1. using multiple backgrounds with a linear gradient,
2. multiple backgrounds with a generated PNG, or
3. styling an :after pseudoelement to act as a secondary background layer.

You need then a wrapping element with the bg image and in it the content element with the bg color:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

and the css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}