Change the background colour on the body for each section (multiple body background colors)

Question

Basically i have a website that i want the background colour to be different as you scroll down. For example(not me real code but for an example):

   <div id="content">
          <!--   (This is 400px height) -->
   </div>

   <div id="footer">
         <!--   (This is 400px height) -->
   </div>

</div>

Now imagine that is my website, i want the bodys background to be black on the left and right side of the #header Div container.

I want the bodys background to be white on the right and left side of the #content Div contrainer.

I want the bodys background to be grey on the right and left side of the #footer Div container.

Can i do this without making a background image, as this would not change if the content changed in the page. Meaning if i added content i would have to redo the image to match it. This cannot be the only way.

Can someone help please? :)

Answer 1 · 2014-06-23T20:08:30Z

June 23, 2014 8:08pm

You could nest your divs in divs with different background colors.

Example below:

<style>
body {margin:0;padding:0;}
.background {margin:0;padding:0;}
.bg-color1 {background: red;}
.bg-color2 {background: blue;}
.content {width:80%;margin:0 auto; background:white;}
.footer {width:80%;margin:0 auto; background:white;}
</style>

 <div class="background bg-color1">
    <div id="content">
          <!-- (This is 400px height) -->
    </div>
</div>
 <div class="background bg-color2">
   <div id="footer">
         <!--   (This is 400px height) -->
   </div>
</div>

Answer 2 · 2014-06-27T13:20:41Z

June 27, 2014 1:20pm

Thanks for your answer, i actually resulted to doing this shortly after posting my question but just realised you answered. :)

Welcome to the Treehouse Community

Looking to learn something new?

Matthew Smart

Matthew Smart

Change the background colour on the body for each section (multiple body background colors)

2 Answers

James Christensen

James Christensen

Matthew Smart

Matthew Smart