HTML and CSS fullscreen landing page I would like to know if this fullscreen page with image and overlay is written clearly. I'm afraid that those two empty divs (topOverlay, and topImage) are not correct. Someone told me that I shouldn't use empty divs when there's another way to do it, but I couldn't find an alternative way in this case. Is there a different suitable tag for this instead of using div?

Everything works great otherwise. I just want it as clean as possible. 



@import url(https://fonts.googleapis.com/css?family=Josefin+Slab);

body, html{
    margin: 0;
    height: 100%;
}


/* TOP - fullscreen image with overlay */
#top{
    width: 100%;
    height: 100%;
}
#topOverlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 188, 156, 0.98);
    z-index: 2;
}
#topImage{
    width: 100%;
    height: 100%;
    background: url("../images/workspace.jpg");
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
#topTextWrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
}
#topText{
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    font-family: 'Josefin Slab', serif;
    text-transform: uppercase;
    text-align: center;
    color: white;
}
#topText h1{
    font-size: 3.2em;
    margin:0;
    padding:0;
}
#topTextDescription h2{
   font-size: 1.4em; 
    margin:0;
    padding:0;
}
&lt;div id="top"&gt; &lt;!-- #top fullscreen image with site header --&gt;
    &lt;div id="topOverlay"&gt;
    &lt;/div&gt;
    &lt;div id="topTextWrapper"&gt;
        &lt;div id="topText"&gt;
            &lt;h1&gt;Site header&lt;/h1&gt;
            &lt;div id="topTextDescription"&gt;
                &lt;h2&gt;Site description&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="topImage"&gt;
    &lt;/div&gt;
&lt;/div&gt; &lt;!-- END #top --&gt;
I think your idea is good, just try to use less ID and more classes with atomic classes, for example:

&lt;div id="top" class="f100"&gt;
&lt;div id="topOverlay"  class="f100 abs"&gt;&lt;/div&gt;
&lt;div id="topTextWrapper" class="f100 abs"&gt;
    &lt;div id="topText"&gt;
        &lt;h1 class="m0 p0"&gt;Site header&lt;/h1&gt;
        &lt;h2 class="m0 p0"&gt;Site description&lt;/h2&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="topImage"  class="f100"&gt;&lt;/div&gt;




CSS :

    body, html{
        margin: 0;
        height: 100%;
    }
    .m0{margin:0;}
    .p0{padding:0;}
    .f100{width: 100%;height: 100%;}
    .abs{position: absolute;}

    #topOverlay{
        background-color: rgba(26, 188, 156, 0.98);
        z-index: 2;
    }
    #topImage{
        background: url("../images/workspace.jpg") cover center center;
        z-index: 1;
    }
    #topTextWrapper{
        z-index: 3;
    }
    #topText{
        position: relative;
        top: 40%;
        transform: translateY(-50%);
        font-family: 'Josefin Slab', serif;
        text-transform: uppercase;
        text-align: center;
        color: white;
    }
    #topText h1{
        font-size: 3.2em;
    }
    #topText h2{
       font-size: 1.4em;
    }


See especially how these 4 classes are used in the above example:

.m0{margin:0;}
.p0{padding:0;}
.f100{width: 100%;height: 100%;}
.abs{position: absolute;}


I was able to reduce the CSS from 53 line to 35 ( 35% )
plus its more simple