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
Lori Smith
1,409 PointsHow do I set a different background on each of my pages?
My index (home) page has a background color with a hero image and several different divs layered over the background color. I want the subsequent pages to retain the background color and the nav bar (horizontal on the top in its own div and with a different background color) but have a different background image. This background image won't be a hero image but will be layered over background color with about a 25 pix margin. Hope I'm explaining that well enough. I created a new div on the other pages and created a background image in CSS but it's not appearing. If you need the code I can include but I was hoping just for a general way of doing this. Thanks.
7 Answers
Aaron Wuerch
7,024 PointsHi there,
Create a .class in the <html> tag of each page, and then set the class in CSS to have the certain background image you want.
for example:
For home page:
<html class="home-bg>
For about page:
<html class="about-bg>
then just .class it in css with the proper background image
I would also include this in your css for the html element:
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Lori Smith
1,409 PointsThanks, Aaron. Turns out I was right. Adding content (in this case text) to the div let the image expand to accommodate the content. Which is working fine for my purposes. Thanks for all your help!
Aaron Wuerch
7,024 PointsGreat Problem Solved!
Lori Smith
1,409 PointsNo, I'm not. I've paused my membership so I don't have access to workspaces anymore. :(
Aaron Wuerch
7,024 PointsOk. Sorry im just trying to 100% understand your problem. You are trying to keep the entire layout as it is, the only thing that changes is this "hero" image in all the other pages, or am I missing something.
Lori Smith
1,409 PointsNo problem. I appreciate the help.
The layout is somewhat the same. Same background color, same nav bar but the "hero" div will extend the full length of the page and the background-image in the hero div will be different. I tried just working with the code I had for the hero div and use that image and work first on the sizing but no matter what I use, only a sliver of the image shows - not even the way it does on the home page. I'm perplexed.
Aaron Wuerch
7,024 PointsMaybe try using the cover value for background-image. so background-image: cover;
If yoou have a very high pixel image, using the cover value should adjust the image size properly.
Lori Smith
1,409 PointsI actually think the problem has to do with the fact that there's no other content in that div. I see a very small strip of the image but since there's no other content, it's not expanding to hold all the content. I rather expected to see the full background image waiting for the content.
Aaron Wuerch
7,024 Pointsusing the cover value should expand the entire image to span the entire page or div, whatever you are using. Another thing to consider is maybe the organisation of your css, is there any other css rules you have that are causing the "cascade" effect to negate your new image css properties? Also is there any inline html styles ? As they have a higher priority they too could be affecting your new css.
But im really taking jabs at the air right now, if you could send your code, that would be best.
Lori Smith
1,409 PointsYeah, I understand it's tough to help without the code.
Aaron Wuerch
7,024 Pointsyou can copy and paste your code here:
just put your code in between 3 backticks (```) at start and 3 again at the end
Lori Smith
1,409 PointsLori Smith
1,409 PointsThanks, Aaron. I wish it were as simple as that. I've styled the home page to look like a document on top of a background color. I want to repeat that on subsequent pages so it's not like a full background image on each page. I'm not using github or codepen yet so I'm not sure how to share the appearance of the page.
On the home page the relevant CSS for each section follows. These are three divs situated vertically on top of one another. (There's a fourth div situated to the right of "current".) On the subsequent pages I only want the nav bar with a background image that aligns with the nav bar (right and left margins of 25px). I'll apply some transparency so I can put text on top of it.
.hero { background-image: url('../img/sepia2.jpg'); background-size: 100%; margin-top: 0; margin-bottom:0; margin-right: 25px; margin-left: 25px; padding: 10px 0px 10px 0px; background-image: no-repeat; }
.callout { padding: 10px 25px; margin: 0 25px; background-color: white; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;
}
.current { padding-left: 25px; padding-right: 400px; float: left; margin: 0 25px; background-color: #D8A963; border-radius: 25px; }
Aaron Wuerch
7,024 PointsAaron Wuerch
7,024 Pointsare you doing this all on Workspaces here in Treehouse? if so you ca just share your workspace.