HomeHtml & Css ProjectHow To Create CSS Background Image Overlay

How To Create CSS Background Image Overlay

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:

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.


First, create a Html file (index.html) and paste the given codes in your CSS file.

    <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 class="overlay"></div>
    <!-- Coding With Nick -->


Second, create a CSS file (style.css) and paste the given codes in your CSS file.

/* Coding With Nick */

    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background: url(1.jpeg);
    background-size: cover;
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000c4;
    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 –



Please enter your comment!
Please enter your name here

Most Popular

- Advertisment -