Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Abdil Nour
Abdil Nour
1,475 Points

Multiple Colors On A Website Background

I need to figure out how to change my website background similar to this website https://venngage.com/.... see how it turns from white to light blue when you scroll down. What is that proper term called and how do you do it.... Thanks.

4 Answers

Stephen Walker II
PLUS
Stephen Walker II
Courses Plus Student 2,151 Points
Stephen Walker II
Stephen Walker II
Courses Plus Student 2,151 Points

If you look at the code, you'll notice that those are separate row containers with varying background properties. You can do this too by creating unique DIVs for the sections that you want to alternate background colors on.

Abdil Nour
Abdil Nour
1,475 Points
Abdil Nour
Abdil Nour
1,475 Points

Can you show me the css code on how to do it and Also can you please tell me what the proper term for that is called?

eck
eck
43,038 Points
eck
eck
43,038 Points

Hey, I hope this is what you are looking for. I am afraid I do not know what the style is referred as though.

<!docktype html>
    <html>
    <head>
        <title>Abdil Nour is Awesome!</title>
    <style type="text/css">
        body, #nav, #header, .white-box, .blue-box {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            height: 100%;
        }
        h1{
            margin: 0;
            padding: 150px 0;
        }
        #nav
        {
            height: 60px;
            color: #fff;
            position: fixed;
            background: darkblue;
        }
        #header {
            background: red;
            text-align: center;
        }
        #header, .white-box, .blue-box {
            height: 400px;
        }
        .white-box {
            background: #ccc;
        }
        .blue-box {
            background: lightblue;
        }


    </style>
    </head>
    <body>
        <div id='nav'>Navigation</div>
        <div id='header'>
            <h1>Some Cool Image!</h1>
        </div>
        <div class='white-box'>Content!</div>
        <div class='blue-box'>More Content!</div>
        <div class='white-box'>And Something Else!</div>
        <div class='blue-box'>Redundancy!</div>
    </body>
    </html>
Abdil Nour
Abdil Nour
1,475 Points
Abdil Nour
Abdil Nour
1,475 Points

Perfect. That's exactly what I was looking for, all i need is the proper term for what its called so i can learn it myself. Thank You Very Much.