HTML5 - semantic Layout with correct role

Question

I want to create a template with correct semnatic. I'm making use of roles. Now I need something like a div with a background-image. I cannot place it in the body, because it has to stand on the footer. The header with the logo needs to have the background. How shall I name and put that div?

HTML

<header role="banner">
    <h1>My Logo</h1>
</header>
<div class="background">
<main role="main">

</main>
 </div>
<footer></footer>

Answer 1

If you want to have something "semantic", for that class, i think it's better to use something like "wrapper" or "main" for a div/block that is the largest parent block. The "background" class means something, but not the functionnality of your block. Write semantic, means you write something that explains/describes what's inside.

I'd rather change the code :

<main //put your background on this tag>
<article>
//and make use of others semantic tags : article / section ....
</article>    
</main>