How can I apply a background to a container around my content and not HTML?

Question

I want to set the background of my page to fill a div container around my content and not use the HTML selector to set the background because a teacher has told me this isn't good syntax.

The issue is, I'm finding my container background isn't applying to the push div and footer. Please, help.

Answer 1

Your problem is here in your CSS:

.footer, .push {
    height: 40px;
} 

This is overriding your rules that have been already applied (your .wrapper and .container rules at the top). Try getting rid of this rule or commenting it out to test if it fixes your problem.

EDIT: You also don't seem to have a .footer element in your main page. This could be why that rule is not working. Try removing that . before the footer and see if that helps.

Answer 2

First you better set the background to the body element.

and your footer have a background property of its own.