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 trialBrad Harris
1,106 PointsCSS Background Sizing!
I'm stuck! Trying to set <div id="bg">
and make this bg image the entire background of the browser. I would like it to mirror wetransfer.com's background image. But the result leaves white space under the picture. My code is:
#bg {
height: 100%;
background-repeat:no-repeat;
background-size:cover;
z-index: 0;
position: fixed;
top: 0;
left: 0;
overflow: hidden;
}
Brad Harris
1,106 PointsThanks Michael. I've taken a look, any idea what I am doing wrong?
6 Answers
Brendan O'Brien
9,066 PointsAre you just wanting the the entire page with a background like that or an element? Try it without the height or z-index or position or top or left or overflow attributes. Try something like this:
#element {
background: url(file.jpg) no-repeat bottom left;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
}
Brad Harris
1,106 PointsReally appreciate your reply.. my page looks like this: http://skitrip.co/, with the image floating all the way right (if you scroll right you see it). Any idea what I messed up there?
Brendan O'Brien
9,066 PointsThere are some strange things happening there. It seems like your two elements:
.bg {...}
.bg img {...}
Are causing some conflicting problems.
Brendan O'Brien
9,066 PointsI removed the absolutes and fixed positions from your bg and bg2 elements and it got everything lined up to the left at least. The positioning is still a little strange though.
Brad Harris
1,106 PointsInteresting. Any further thoughts please let me know. Thanks Brendan
Brendan O'Brien
9,066 PointsNo problem,
I'd suggest scaling back a bit.. get the one image to work statically and then add in the image swapping.
Michael Wiss
19,233 PointsMichael Wiss
19,233 PointsI always refer to this css-tricks post