5
\$\begingroup\$

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

Improve this question
\$\endgroup\$
1
  • \$\begingroup\$ Can I ask why do you have to use empty divs? What are you trying to achieve by using them? I don't fully understand your question. \$\endgroup\$
    – Oscar Guillamon
    Dec 23, 2015 at 13:24

2 Answers 2

Reset to default
1
\$\begingroup\$

You should be able to achieve the same effect with less markup, and limiting yourself to semantic markup.

Since the #top div just contains <h1> and <h2>, I think that a <header> element would be appropriate, if you are using HTML5.

The background image and overlay are meant to cover the entire page, so why not just use the <body> element? For the overlay, you can use the ::before pseudo-element. Be sure to define content: "" and display: block on it. I would use absolute positioning, setting all four edges to 0, to make the overlay cover the page.

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

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

body {
    background: url("http://lorempixel.com/image_output/business-q-c-640-480-5.jpg");
    background-size: cover;
    background-position: center center;
}
/* Cyan tint on the entire page */
body::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(26, 188, 156, 0.98);
    opacity: 0.5;
}

#top {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    font-family: 'Josefin Slab', serif;
    text-transform: uppercase;
    text-align: center;
    color: white;
}

#top h1 {
    font-size: 3.2em;
    margin: 0;
    padding: 0;
}
#top h2 {
    font-size: 1.4em; 
    margin: 0;
    padding: 0;
}
<header id="top"> <!-- #top fullscreen image with site header -->
  <h1>Site header</h1>
  <h2>Site description</h2>
</header> <!-- END #top -->

Improve this answer
\$\endgroup\$
1
\$\begingroup\$

I think your idea is good, just try to use less ID and more classes with atomic classes, for example:

<div id="top" class="f100">
<div id="topOverlay"  class="f100 abs"></div>
<div id="topTextWrapper" class="f100 abs">
    <div id="topText">
        <h1 class="m0 p0">Site header</h1>
        <h2 class="m0 p0">Site description</h2>
    </div>
</div>
<div id="topImage"  class="f100"></div>

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

Improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.