Skip to main content
K
kpmi
Known Participant
August 31, 2015
Question

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

  • August 31, 2015
  • 3 replies
  • 690 views

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?

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 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
    K
    kpmiAuthor
    Known Participant
    September 1, 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

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    September 1, 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.

    PrabhakarKumar
    Adobe Employee
    PrabhakarKumar
    Adobe Employee
    August 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

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    August 31, 2015

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

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

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

    <section class="blue">

    <header>

    This is a blue section

    </header>

    </section>

    <section class="red">

    <article>

    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>

    <section>

    <article>

    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>

    <section class="red">

    <article>

    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>

    <section class="green">

    <footer>

    This is a green section

    </footer>

    </section>

    </body>

    </html>

    Nancy O.

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices