How to Add a Color Overlay to a Background Image

How to add a color overlay to a background image?

I see 2 easy options:

multiple background with a translucent single gradient over image
huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

a third option

with background-blen-mode :

The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

How to add overlay to background image

You could nest two blocks together, one with the background image, and the other with the overlay :

.background{  width: 500px;  height: 500px;  background: url('https://static1.squarespace.com/static/56be46d2a3360cae707270a0/t/5772ef9b20099e38818859b0/1467150245253/');  background-size: cover;}
.overlay{  width: 500px;  height: 500px;  background-color: rgba(0, 0, 0, 0.5);}

<div class="background">  <div class="overlay">    <!-- Content here -->  </div></div>

How to overlay image with color in CSS?

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

Semi-transparent color layer over background-image?

Here it is:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML for this:

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

Of course you need to define a width and height to the .background class, if there are no other elements inside of it

Making a color overlay with body image background

Use the background CSS property, here's an example.

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

Credit: https://css-tricks.com/tinted-images-multiple-backgrounds/

Color overlay over HTML img

Try this jsFiddle

.default-user {    position: absolute;    outline: #e8e8e8 solid 1px;    -webkit-filter: grayscale(50%);    filter: grayscale(50%);    width:150px;height:150px;}    #overlay {    padding:10px;    position:absolute;    background-color:white;    opacity:0.5;    /* -> transparency 50% */    height:130px;   /* -> image_height - padding */    width:130px;    /* -> image_width - padding */    z-index:1;      /* -> put overlay over image */}

<div class=container>    <div id=overlay>Overlay text</div>    <img class="default-user" src="https://minotar.net/helm/Steve/16.png"></div>

How to Add a Color Overlay to a Background Image