How to add a gradient overlay to a background image using just CSS and HTML?

Today, We want to share with you gradient overlay css.In this post we will show you css gradient over background image, hear for background image gradient we will give you demo and example for implement.In this post, we will learn about image overlay hover effects with css3 transitions with an example.

Creating Image Overlays with CSS Multiple Backgrounds

Adding a background image to a

(or any other HTML tag) is easy using CSS code. step by step Here it is (without gradient yet – scroll down for the gradient image css code):

HTML Code

Welcome To Pakainfo.com

CSS Code

/* (Scroll down for gradient rules) */
#background_image {
    background-image: url('images/background.jpg');
    width: 80%;
    height: 200px;
    background-size: cover;
    color: white;
}

We have update some other css rules on the html tag div to set the background image to fill to fit the whole div (cropping if needed) with the css background-size: cover. The width is 80%, therefor resize your any browser like as a chrome, mozila to see how this background-size works. (It will crop the image to ensure it fits correctly).

How to add a gradient on top of a background image?

If you wanted to add a semi opaque/semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another html tag to div (or use the :after css selector).

However, the best way to do it is to just add another some parameter to the background-image css rule.

HTML Code

Welcome To Pakainfo.com

CSS Code

#background_image_2 {
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('images/background.jpg');
    width: 80%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}

Both divs are using the same background image, but the second one has a linear-gradient on it. The rgba(x,y,z,o) is the colour (first three numbers = red/green/blue. The 4th param (0.52) is the opacity – 1.0 is fully visible, 0.0 is invisible).

CSS | Combine background image with gradient overlay

Background image with Linear gradient Example using CSS and HTML.

 
 

 
	 
	 
	 
	 
	 
 

 
	
 
		Welcome To My Google Adsense
	
 
 

 

css background overlay

here you can Learn how to create an overlay effect with CSS.

  
Overlay using Pakainfo.com
  
Example of css image gradient, background overlay css, background image overlay css, css gradient over background image
  Turn on overlay effect

Image Gradient Overlay

HTML Code

  

    

      
Before

    
    

    
After

  

    
  

CSS Code

/*
source
http://stackoverflow.com/a/23935891/3853728
*/

.img-gradient{
  position:relative;
  display:inline-block;
}


/* 
#002f4b,#dc4225 
Convert HEX to RGBA - http://hex2rgba.devoth.com/
*/
.img-gradient:after {
  content:'';
  position:absolute;
  left:0; top:0;
  width:100%; height:100%;
  display:inline-block;
  background: -moz-linear-gradient(top, rgba(0,47,75,0.5) 0%, rgba(220, 66, 37, 0.5) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220, 66, 37, 0.5)), color-stop(100%,rgba(0,47,75,0.5))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* IE10+ */
  background: linear-gradient(to bottom, rgba(0,47,75,0.5) 0%,rgba(220, 66, 37, 0.5) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002f4b', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
.img-gradient img{
  display:block;
}

How to add a gradient background to a div without using images

You can also easily add a gradient background to a div (or any other HTML element) without using images, using the following CSS rules.

BTW, I’ve set the gradient to start at red and end in blue. It might not look pretty, but it is so you can click the buttons below to swap its position, and quickly work out what direction it is facing.

I hope you get an idea about css background image gradient transparency.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.