Background Image with Overlay CSS

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(https://picsum.photos/id/1043/800/600);
      background-size:cover;
    }

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

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/

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

How to style background image and overlay content above

Quick and dirty

Add an id="bg-image" attribute to the img tag in question and apply the following CSS:

img#bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

The crucial part is that #bg-image is assigned a position property since z-index is only applied to elements that have position set.

The right way

You should consider either setting a background-image attribute on the container via JS or dynamically add a class to the container element via JS. I.e.:

<section id="weather-wrapper" class="container-fluid"> would become <section id="weather-wrapper" class="container-fluid sunny">) if it is sunny at the location in question. The background image would be predefined in CSS accordingly, i.e.

#weather-wrapper.sunny {
    background-image: url(images/sunny.png);
}

#weather-wrapper.rainy {
    background-image: url(images/rainy.png);
}

/* etc. */

---

Related Topics