HTML:

<div id="top"> <!-- #top fullscreen image with site header -->
    <div id="topOverlay">
    </div>
    <div id="topTextWrapper">
        <div id="topText">
            <h1>Site header</h1>
            <div id="topTextDescription">
                <h2>Site description</h2>
            </div>
        </div>
    </div>
    <div id="topImage">
    </div>
</div> <!-- END #top -->

CSS:

@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;
}

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. Thanks for any answers!

HTML:

<div id="top"> <!-- #top fullscreen image with site header -->
    <div id="topOverlay">
    </div>
    <div id="topTextWrapper">
        <div id="topText">
            <h1>Site header</h1>
            <div id="topTextDescription">
                <h2>Site description</h2>
            </div>
        </div>
    </div>
    <div id="topImage">
    </div>
</div> <!-- END #top -->

CSS:

@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;
}

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.

HTML:

<div id="top"> <!-- #top fullscreen image with site header -->
    <div id="topOverlay">
    </div>
    <div id="topTextWrapper">
        <div id="topText">
            <h1>Site header</h1>
            <div id="topTextDescription">
                <h2>Site description</h2>
            </div>
        </div>
    </div>
    <div id="topImage">
    </div>
</div> <!-- END #top -->

CSS:

@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;
}