Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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%;
}

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

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

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.

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

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.