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 {
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(;

shadow option:

html {
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 {
background:url( rgba(255, 0, 150, 0.3);
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('');  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

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 {
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">

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 {
/* top, transparent red, faked with gradient */
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
/* bottom, image */


Color overlay over HTML img

Try this jsFiddle