Background Image With Color Overlay Css Code Example

Example 1: how to have a background image with a color overlay

/* Working method */ .tinted-image {   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); }

Example 2: background image overlay

html {   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); }

Example 3: make background overlay css

#element-with-background-image {    position: relative;    background-image: url("//spin.atomicobject.com/wp-content/uploads/20170324102432/portfolio-tips-feature-image.jpg"); }   #color-overlay {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: black;    opacity: 0.6; }

Example 4: overlay color on image css

footer#site-footer{     position:relative; }  footer#site-footer:before {     /* use before property (pseudo-element)  */     position: absolute;     content: '';     top: 0;     left: 0;     width: 100%;     height: 100%;     background: rgba(0,0,0,0.3); }

Example 5: how to add a background overlay in css

.header {   background: rgba(0, 0, 0, 0.5); /* Black color with 50% alpha/opacity */ }

Example 6: make background overlay css

<div id="element-with-background-image">    <div id="color-overlay"></div>    ... </div>