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 Slavik Ostapenko
Slavik Ostapenko
Courses Plus Student 12,480 Points

Problem with CSS backround-size property

Hello all, I want my background to cover the whole page, when the browser is resized - i want my background to cover the whole page.

This is the code i wrote, but the result is more like "contain" and not "cover". I can't understand WHY?

<!DOCTYPE html> <html> <head> <title>Background image</title> </head> <body> <style> body { background-image: url(slideshow/01.jpg); background-size: cover; background-repeat: no-repeat; background-position: top center; } </style> </body> </html>

This is how the page looks (there's a white space on the bottom of the browser) http://i056.radikal.ru/1407/fb/d95f080c3985.jpg

This is code again (more readable) http://s019.radikal.ru/i634/1407/92/3e9e8ebd5b62.jpg

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Slavik,

Try giving your html and body elements 100% height.

html, body {
  height: 100%;
  margin: 0;
}

You'll also probably want to use background-attachment: fixed; as Manuel has suggested. If you have a long page then you probably don't want the background image to scroll with it.

Manuel Schulze
Manuel Schulze
12,739 Points
Manuel Schulze
Manuel Schulze
12,739 Points

Maybe this is helping you, change the background-position to: center center.

Or use this one:

html { background: url(slideshow/01.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Does one of these solutions help?

Slavik Ostapenko
PLUS
Slavik Ostapenko
Courses Plus Student 12,480 Points
Slavik Ostapenko
Slavik Ostapenko
Courses Plus Student 12,480 Points

Unfortunatly it didn't help