How do I create different background colors for different sections of my page, which act like #wrapper color?

Report · Aug 31, 2015

My design calls for three blocks of color, each behind specific content. I have tried defining new background colors under the <section> element, but it only fills in that width of the page. I can't get any of them to work besides the #fff defined by the wrapper.

Any ideas?

Report · Aug 31, 2015

Use 100% width section as a container for other elements like this:

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

section {width:100%;}

.red {background:#990000;color:#FFF;}

.blue {background: #009; color: #FFF}

.green {background: #363; color: #FFF;}

aside, article, header, footer {width: 80%; margin:0 auto; padding: 2%;}

</style>

</head>

<body>

This is a blue section

</header>

</section>

This is a red section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

This is a default section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

This is a red section.

<h3>Heading 3</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>

</article>

</section>

This is a green section

</footer>

</section>

</body>

</html>

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 31, 2015

Hi,

Use three different DIV to create different sections

You can use DIV styling to add background colors :

<div style="background-color:#E82E2E">Enter your content here

</div>

Thanks

Prabhakar Kumar

Report · Aug 31, 2015

In addition to the ideas already given above, you could alternate your section background-colors with CSS nth-child or nth-child-of-type pseudo-selectors. The advantage is you don't have to specify classes on all your <section> tags = leaner markup.

<style>

section {width:100%;}

/**every 3rd section starting with 1st**/

section:nth-of-type(3n+1) {background:#990000;color:#FFF;}

/**every 3rd starting with 2nd**/

section:nth-of-type(3n+2) {background: #009; color: #FFF}

/**every 3rd starting with 3rd**/

section:nth-of-type(3n+3) {background: #363; color: #FFF;}

</style>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 31, 2015

Nancy:

I so appreciate your help. I haven't worked with nth classes before, so do I use this code as written or do I need to change the nth code to a number?

If so, can you please give me an example?

Thanks - -

Deborah

Report · Sep 01, 2015

Here are the basics of those nth selectors...

CSS3 :nth-of-type() Selector

CSS3 :nth-child() Selector

The only issue worth mentioning is certain older browsers (OK, pretty much just IE 8 and lower) won't see the settings on nth selectors. If you MUST code for IE8 or lower, you probably won't want to use them.

Report · Sep 01, 2015

IE8 will see the default body colors & background. I might not use nth-child selectors for content but appearance is not going to make or break a web site for IE8 users. Besides, they won't know what they're not seeing.

Nancy O.

Nancy O'Shea— Product User, Community Expert & Moderator