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 Rajinder Sihota
Rajinder Sihota
3,473 Points

Adding background image to cover only the header/menu area

I set the background color under body {} and I'm wanting to add a different background to just the header and 'nav'/menu area. The code I wrote for this is:

#header, #nav {
background-image: url("img/arches.png");
background-repeat;
}

but the body { background-color: #F0EFE9; } stays in place and the change I made doesn't implement.

How can I override and put the background image i want to cover the header/nav areas?

7 Answers

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

You needed you wright your 'background-repeat' property like this:

#header, #nav {
background-image: url("img/arches.png");
background-repeat: repeat;
}

You can also combine CSS properties into one declaration. instead I would wright it like this:

#header, #nav {
background-image: url("img/arches.png") repeat;
}
Rajinder Sihota
Rajinder Sihota
3,473 Points
Rajinder Sihota
Rajinder Sihota
3,473 Points

Nothing is changing, might be another issue, here is the code I have in my CSS.

#header {
font-family: serif;
color: #472B0B;
text-align: center;
font-size: 200%;
line-height: 0.5em;
}

#header, #nav {
background-image: url("img/arches.png") repeat;
}


body {
background-color:#F0EFE9;
}

#nav, #footer {
background-color: #A67829;
margin-top: 0px;
padding: 5px 0px 5px 0px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}

All other images I've added were in the html, first time doing it in CSS, and not working.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

You need to give the header and footer width and height properties I think.

Rajinder Sihota
Rajinder Sihota
3,473 Points
Rajinder Sihota
Rajinder Sihota
3,473 Points

That doesn't do anything.

Here's what it looks like right now at: www.sunnysihota.com

I'm trying to get the background image I have to become the background instead of the current background color there. Image doesn't show up in neither the header area or the nav area (menu bar).

J A
J A
6,092 Points
J A
J A
6,092 Points

You are setting a background color in #nav further down the sheet after you set the image. It is overriding the background image.

J A
J A
6,092 Points
J A
J A
6,092 Points

Also, the image is relative to the location of the css file and not the page. Create a /img folder in your /css folder and add the arches.png to that folder.

Elliott Frazier
PLUS
Elliott Frazier
Courses Plus Student 9,647 Points
Elliott Frazier
Elliott Frazier
Courses Plus Student 9,647 Points

Move:

#header, #nav {
background-image: url("img/arches.png") repeat;
}

To the bottom of your style sheet because it is getting overridden by the other background property propertythat is declared further down the page.