Hey friends, today in this blog you’ll learnHow To Create CSS Background Image Overlay . Earlier I’ve shared a blog on How to Create Resume CV Website Using HTML CSS Bootstrap4 . In this blog, I’m going to create a CSS Background Image Overlay .
If you’re feeling difficulty understanding then you can watch a full video tutorial of this CSS Background Image Overlay .
Video Tutorial of CSS Background Image Overlay
You might like this:
- Responsive Image gallery
- Responsive Navigation Bar Design using HTML and CSS
- Create a Portfolio Filter Using Html Css & Javascript
- Complete Responsive Ecommerce Website Using Html Css
CSS Background Image Overlay [Source Codes]
To create this CSS Background Image Overlay . First, you need to create Two files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<body>
<div class="container">
<div class="title">
<h1>CSS Background Image Overlay</h1>
<p>Create A Full Width Background Image With Overlay</p>
<p>HTML * CSS</p>
</div>
<div class="overlay"></div>
</div>
<!-- Coding With Nick -->
</body>
# CSS CODE
Second, create a CSS file (style.css) and paste the given codes in your CSS file.
/* Coding With Nick */
body{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 100vh;
background: url(1.jpeg);
background-size: cover;
position: relative;
overflow: hidden;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000c4;
}
.title{
position: absolute;
top: 45%;
left: 15%;
right: 15%;
transform: translateY(-50%);
z-index: 2;
font-family: sans-serif;
}
.title h1{
font-size: 60px;
color: white;
text-align: center;
margin: 0;
}
.title p{
font-size: 20px;
color: white;
text-align: center;
margin-top: 10px;
letter-spacing: 2px;
font-weight: 500;
}
That’s all, now you’ve successfully Create a CSS Background Image Overlay .
I Hope this blog will be helpful.
Read More –
