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
Brandon Brigham
3,716 PointsTrying to install a background body picture but it's not showing up...
Hi,
So I have a background image that I'm trying to install in the body of my site below the current one with the vineyards. If you look at the original site at http://www.villa-terrazza.com/ you can see at the bottom there is an orange-looking image that repeats.
My current site http://www.villa-terrazza.com/2014NewSite/ doesn't have that image on the bottom.
Any ideas?
Thanks!
6 Answers
Nick Perdomo
10,529 PointsHi Brandon, It looks like you have two styles in action on your old site, one for the HTML element "body" and one for the CSS id #body. The HTML of your new site is not referencing the id #body, which contains the repeatable image (http://www.villa-terrazza.com/assets/images/body-bkgd.gif).
Brandon Brigham
3,716 PointsThanks Nick - I tried inserting the #body div in the footer but nothing came up. Where do you think I should put?
Luke Lee
7,577 PointsHi Brandon: create another div inside body to wrap the <div id="page">. then use this css:
body.custom-background {
background-image: url('http://www.villa-terrazza.com/2014NewSite/wp-content/uploads/2014/05/body-bkgd.gif');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
}
div.that-inside-body {
background: url('http://www.villa-terrazza.com/assets/images/page-bkgd.jpg') no-repeat center top;
}
Brandon Brigham
3,716 PointsHi Luke,
Thanks for your help. I tried doing something similar to that but it didn't work. Not sure what I'm doing wrong.
Luke Lee
7,577 Pointsyour html is:
<html>
<body class="custom-background">
<div id="page" class="hfeed site">
......
......
......
</div>
</body>
</html>
It should be:
<html>
<body class="custom-background">
<div class="wrap">
<div id="page" class="hfeed site">
......
......
......
</div>
</div>
</body>
</html>
then in css:
body.custom-background {
background-image: url('http://www.villa-terrazza.com/2014NewSite/wp-content/uploads/2014/05/body-bkgd.gif');
background-repeat: repeat;
background-position: top center;
background-attachment: scroll;
}
div.wrap {
background: url('http://www.villa-terrazza.com/assets/images/page-bkgd.jpg') no-repeat center top;
}
Brandon Brigham
3,716 PointsSorry Luke - it's getting really late over here and I can't seem to get my head around this...
Luke Lee
7,577 PointsIts fine. Just remember you have 2 background images. one is the grape field photo, another one is the repeatable soil image. You will need 2 layers to display these 2 background. <body> should have the repeatable soil background, the first div within <body> should have the grape field photo background.
Brandon Brigham
3,716 PointsThanks again for your help Luke. So just to clarify: I am going to make the soil image the .custom-background (which is done through the WordPress admin) then I need to make the #body div visible in my HTML and apply the grape fields image to that?
Luke Lee
7,577 PointsYes, and make the custom-background repeat, because it will cover the whole browser. Make the #body div no-repeat, and position it center top.