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 Brad Harris
Brad Harris
1,106 Points

CSS 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;
}
Michael Wiss
Michael Wiss
19,233 Points

I always refer to this css-tricks post

Brad Harris
Brad Harris
1,106 Points

Thanks Michael. I've taken a look, any idea what I am doing wrong?

6 Answers

Brendan O'Brien
Brendan O'Brien
9,066 Points
Brendan O'Brien
Brendan O'Brien
9,066 Points

Are 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
Brad Harris
1,106 Points
Brad Harris
Brad Harris
1,106 Points

Really 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
Brendan O'Brien
9,066 Points
Brendan O'Brien
Brendan O'Brien
9,066 Points

There are some strange things happening there. It seems like your two elements:

.bg {...}

.bg img {...}

Are causing some conflicting problems.

Brendan O'Brien
Brendan O'Brien
9,066 Points
Brendan O'Brien
Brendan O'Brien
9,066 Points

I 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
Brad Harris
1,106 Points
Brad Harris
Brad Harris
1,106 Points

Interesting. Any further thoughts please let me know. Thanks Brendan

Brendan O'Brien
Brendan O'Brien
9,066 Points
Brendan O'Brien
Brendan O'Brien
9,066 Points

No problem,

I'd suggest scaling back a bit.. get the one image to work statically and then add in the image swapping.