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
fitrobotic
1,290 PointsBackground Image Advice
Hi,
I'm creating a website and I am trying to determine if I should include a background image in the CSS style sheet or if I should include the image in the html.
I only want the image on the homepage kind of like the large image on the homepage of the Treehouse homepage.
Thanks,
Davina
4 Answers
Kevin Korte
28,149 PointsIf you want the same background image to be used every time the page loads, it's considered best practice to put the background image URL in the style sheet with the rest of the styles. The reason is for better maintainability because your structure (HTML) and presentation (CSS) are separated.
But if you wanted say one image randomly from a set to load in as the background image, than that sort of "dynamic" feature would require the background-url to be in the HTML, and that would be okay too.
fitrobotic
1,290 PointsThanks Kevin. I guess my next question would be how do I get the CSS to style the homepage only for this specific background image?
Kevin Korte
28,149 PointsDepends on your set up. Are you using a CMS, or is this a static site? Is the background image going on the body, or another element? Can you give that element a class or id to call in CSS?
My initial thoughts are just put an class of "frontpage" on the body element of the front page only. Than you can use that frontpage class to make sure the image only gets applied when the body has a class of "frontpage", and define all the styles for that element.
If it was going on a specific element, I might just give it a class and style it that way.
fitrobotic
1,290 PointsNo CMS. I think I will put the image in the body.
Kevin Korte
28,149 PointsSounds good. Than it will be really easy to. On that page, give the body a class like
<body class="my-big-background-image">
don't use that class. It's awful
and in your css you could have
body.my-big-background-image {
background: ( 'path/to/my/background.jpg' );
}
fitrobotic
1,290 PointsThanks I will try this :)