Posted inCSS / Programming / Web Technology

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):

image overlay hover effects with css3 transitions, image hover effects with text, image overlay hover effects,
image overlay hover effects with css3 transitions-2

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).

cool image hover effects css, simple image hover effects, image hover effects bootstrap, image overlay hover effects with css transitions, simple image hover effects
image overlay hover effects with css3 transitions

CSS | Combine background image with gradient overlay

Background image with Linear gradient Example using CSS and HTML.

 
 

 
	Background Image with Gradient - www.pakainfo.com 
	 
	 
	 
	 
 

 
	
Welcome To My Google Adsense

css background overlay

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

image overlay hover effects with css3 transitions-2
image overlay hover effects with css3 transitions-2









Overlay using Pakainfo.com

Example of css image gradient, background overlay css, background image overlay css, css gradient over background image

Image Gradient Overlay

HTML Code

Before

gradient overlay css

After

gradient overlay css

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype