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 <div> (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
<div id='background_image'>Welcome To Pakainfo.com</div>
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
<div id='background_image_2'>Welcome To Pakainfo.com</div>
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image with Gradient - www.pakainfo.com</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.my_bg {
background-image:
linear-gradient(45deg, rgba(
145, 146, 122, 0.62), rgba(
217, 91, 132, 0.58)), url(
'https://www.pakainfo.com/media/download3.png');
width: 100%;
height: 280px;
text-align: center;
}
</style>
</head>
<body>
<div class="my_bg">
Welcome To My Google Adsense
</div>
</body>
</html>
css background overlay
here you can Learn how to create an overlay effect with CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay using Pakainfo.com</h2>
<p>Example of css image gradient, background overlay css, background image overlay css, css gradient over background image</p>
<button onclick="on()">Turn on overlay effect</button>
</div>
<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>
</body>
</html>
Image Gradient Overlay
HTML Code
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Before</h2>
<img src="https://bootstrapcreative.com/wp-bc/wp-content/uploads/2016/11/pablo.png" width="400" />
</div>
<div class="col-md-6">
<h2>After</h2>
<div class="img-gradient">
<img src="https://bootstrapcreative.com/wp-bc/wp-content/uploads/2016/11/pablo.png" width="400" />
</div>
</div>
</div>
</div>
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.