HTML and CSS fullscreen landing page
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