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 David Good
David Good
12,348 Points

Why does my background image not cover the entire header?

I thought the header tag worked similar to a div but in the following code my background does not cover the entire header. The H2 and the Navigation list have no background.

HTML:

<header>
        <h2>Migraine Tracker</h2>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="index.html">Login</a></li>
                <li><a href="index.html">Headache Entry</a></li>
                <li><a href="index.html">Yearly Stats</a></li>
                <li><a href="index.html">Last Month</a></li>
            </ul>
        </nav>
    </header>

CSS:

* {
    font-family:sans-serif;
    background-color: #fff;
}

header {
    background: #000 no-repeat center url('../img/thunderstorm_opt.png');
    width: 100%;
}

header h2 {
    color:#fff;
    text-align:center;
}

My code is here also: https://github.com/DavidNGood/MigraineTrackerInterface

Austin Whipple
Austin Whipple
29,847 Points

I've edited your question a bit to format the code blocks. Be sure to check out the Markdown Cheatsheet below the text editor for more information.

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

But the h2 and the nav list do have a background, because of this:

* { background-color: #fff; }

That gives every element a white background unless you specify something else for it. You might want to remove that from the universal rule.

Then, if you want the image to span the page you could add one of these to the "header" rule:

  background-size: cover;      /* to preserve aspect and display part of the enlarged image */
  background-size: 100% 100%;  /* to stretch the image and display it all */
David Good
David Good
12,348 Points

Thanks! I had ignored that I set a background color in the universal rule