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

Austin Honaker
Austin Honaker
9,421 Points
Posted by Austin Honaker
Austin Honaker
9,421 Points

Background color / image

Hey guys, I'm building a website and 70% of the page is content area. Where 15 % on the left is blank and 15% on the right is blank. I want to add a background color or image that covers that 15% on the left and right. Where the content area background color remains white. What is the best way to go about this? Because when I add a background color it also goes into the content area and unless my content fills the page and I change that specific area to background white it shows that image or background color. Any help is appreciated. Thanks!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Austin,

Perhaps I'm misunderstanding what you have in your design already.

Could you post a link or some code to the forum, I might have a better idea what you need. :-)

6 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Austin,

Assuming the content area itself is contained its own div element, you should be able to control the background colour of the rest of the page with the <body> element.

Use the body element selector to apply a background style with the colour you want.

body {
 background:  lightblue;
}
Austin Honaker
Austin Honaker
9,421 Points
Austin Honaker
Austin Honaker
9,421 Points 
/* Base Styles */

* {
    box-sizing: border-box;
}

html {
    height: 100;
    box-sizing: border-box;

}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;
    padding-bottom: 6rem;

}

header {
    background-color: black;

}



h1 {
    text-align: center;
    margin-top: 0;


}

/* Links */

a {
    color: white;
    text-decoration: none;

}

a:hover {
    color: yellow;
}



/*End of links.*/

/* Classes */

.logo {
    display: flex;
    justify-content: center;

}

.logo1 {
    width: 198px;
    height: 98px;
}

/*OLD NAVBAR*/
/*.navbar {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: -30px;

}

nav li {
    text-align: center;
    width: 100%;
    margin: 0;
}

.navbar ul li {
    border-bottom: solid red 1px;
    list-style-type: none;
}
*/
/*END OLD NAVBAR*/

#main-content {
    background-color: #fff;
    margin: 0;


}

.footer {
    position: fixed;
    bottom: 0;
    background-color: black;
    text-align: center;
    margin-top: 2rem;
    color: white;
    width: 100%;
 }

.footer ul li {
    list-style-type: none;
 }


/*@media queries*/

@media (min-width: 768px) {

    body {
        margin: auto;
        width: 100%;
        background-image: url("../img/background.jpg");

    }

    header {
        display: block;
        width: 100%;
        border-bottom: solid red 2px;
        border-left: solid red 2px;
        border-right: solid red 2px;

    }

/*  MEDIA QUERIES*/

    .main-content {
        margin: auto;
        width: 70%;
        height: 100%;
        background-color: white;
    }

    .background {
        display: inline-block;
        float: left;
        width: 15%;
    }

    .logo {
        float: center;
    }

    .logo1 {
        height: 100px;
        width: 300px;
    }

    .navbar {
        display: block;
        float: center;
        flex-wrap: wrap;
        text-align: center;
        padding-right: 2%;
        font: bold 1em Arial;
    }

    .navbar ul li {
        display: inline-block;
        border-right: solid red 3px;
        padding-right: 5px;
    }

    .footer {
        width: 70%;
        border-top: solid red 2px;
        border-left: solid red 2px;
        border-right: solid red 2px;
    }

    .footer ul li{
        display: inline-block;
        float: center;
        list-style-type: none;
/*      padding-right: 4px;
        padding-left: 4px;
        border-right: solid red 2px;
        border-left: solid red 2px; */          
    }



@media (min-width: 1280px) {

    .logo {
        float: left;
    }

    .logo1 {
        height: 100px;
        width: 350px;
    }



    .navbar {
        border-left: solid red 1px;
        font: bold 1em Arial;
        padding-top: 4%;
        text-align: right;
    }

}

/*Clearfixes*/

.clearfix {
    overflow: auto;

}

Edit: sorry it's a lot and needs some cleaning up but here you go.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hello Austin,

I did cleaned up the code for you with markdown. You can see how to add markdown with the Markdown Cheatsheet link here on the forum page. :)

I'd still need your html but it might be the navbar affecting the main content somehow. Make sure the main content is contained in its own area on the page. You'll want to give your #main-content a width and a height of 100%. That is the main content area you need to give height.

Also you can apply a calc() to #main-content function to make sure that no matter how much content is on the div the footer will stick to the bottom of the viewport.

Austin Honaker
Austin Honaker
9,421 Points
Austin Honaker
Austin Honaker
9,421 Points

This is true, but if the content area doesn't fill the page it remains the same background color even if I change the height to 100%. Is there a way to force even if there isn't content to make it fill the content area?

Stephen Ambler
Stephen Ambler
8,236 Points
Stephen Ambler
Stephen Ambler
8,236 Points

you would have to make the main content section a div or a container you would then be able to change the bg colour.

Austin Honaker
Austin Honaker
9,421 Points
Austin Honaker
Austin Honaker
9,421 Points 
<!DOCTYPE html>
<html>
    <head>
        <meta charset = "UTF-8">
        <title>Team Holowicki</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel = "stylesheet"  type = "text/css" href = "css/stylesheet.css">
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" media="screen" href="./css/mobilemenu.css"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".nav-button").click(function () {
                $(".nav-button,.primary-nav").toggleClass("open");
                });    
            });
        </script>

    </head>



    <body>  


        <header>
            <div class="logo">
                <img src="img/holowicki.png" src="Team Holowicki" class="logo1">
            </div>

            <button class="nav-button">Toggle Navigation</button>
                <div class=navbar>
                    <a href="#" id="menu-icon"></a>
                        <ul class="primary-nav">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="aboutus.html">About Us</a></li>
                            <li><a href="crew.html">Crew</a></li>
                            <li><a href="contact.html">Contact Us</a></li>
                            <li><a href="managers.html">Managers</a></li>
                        </ul>
                </div>

        </header>


<!--        MAIN CONTENT -->
        <div class="main-content">
            <h1>Team Holowicki!</h1>
            <h1>Team Holowicki!</h1>
            <h1>Team Holowicki!</h1>
            <h1>Team Holowicki!</h1>

       </div>

<!--       Footer Start-->

        <div class="footer">            
                <ul>
                    <li>&copy; Holowicki Enterprises 2018</li>
<!--                    <li>Facebook</li>
                    <li>Twitter</li>
                    <li>Instagram</li> -->
                </ul>
        </div>


    </body>


</html>

Here is my html

Austin Honaker
Austin Honaker
9,421 Points
Austin Honaker
Austin Honaker
9,421 Points

https://imgur.com/a/lmHrLmB

Basically, I just want the white to be from top to bottom whether there is content or not.