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

Background-Size CSS

<p><pre>I'm trying to get my background images to scale with the window browser. No matter what I try, the width scales, but the height does not. The larger the window size, the background image exceeds the bottom without scrolling, resulting in my footer not visible. Please help?!

I've tried:

background-size: 100% 100%; (doesn't work at all)

background-size: cover; (works only in width)

background-size: 100% auto; (works only in width)

background-size: contain; (doesn't work at all)

body {

width: 100%;

height: 600px;

position: fixed;

top: 0;

left: 0;

background-image: url('backgroundjpg2.jpg');

background-repeat: no-repeat;

-webkit-background-size: 100% auto;

-moz-background-size: cover;

-o-background-size: cover;

background-size: 100% auto;

-webkit-animation:myfirst 7s; /* Chrome, Safari, Opera */

animation:myfirst 7s;

}

/* Chrome, Safari, Opera */

@-webkit-keyframes myfirst

{

from {background-image: url('backgroundjpg.jpg');

background-repeat: no-repeat;

}

to {background-image:url('backgroundjpg2.jpg');

background-repeat: no-repeat;

}

}

/* Standard syntax */

@keyframes myfirst

{

from {background-image: url('backgroundjpg.jpg');

background-repeat: no-repeat;}

to {background-image:url('backgroundjpg2.jpg');

background-repeat: no-repeat;}

}</pre></p>

5 Answers

Right now you have:

body {

width: 100%;

height: 600px;
}

Change it to

body {

width: 100%;

height: 100%;
}

I don't recommend you style your html tag like Steven Horowitz suggested with that type of styles. Better to style the body or maybe even make a container div with the same styles.

If you want it to fill 100% of the browser you need to make your container fill 100% of the browser. Instead of setting the body height to 600px do 100% and cover will take care of the rest.

Steven Horowitz
Steven Horowitz
6,966 Points

This works for me:

html {
  background-image: url(../img/bg.jpg);
  background-size: 100%;
}

Thank you for responding. Your code worked mostly by bringing back the ability to scroll down to the bottom of the image in a large screen view. However, I wanted to cut it off at the bottom and keep that constant in the browser window. So the bottom with the footer would always be scaled with the image. It would look stretched out in large windows, stretched vertically in small windows. I want the large window effect and I can change the small view in media query. So my height sizing problem is still unresolved. ...Mostly unresolved...

Actually by switching it out of body and into html I was able to put 100% 100% in the background-size value. PROBLEM SOLVED! :D

Brian Goldstein
Brian Goldstein
19,419 Points

Ali's answer is a better practice though, Stephanie --- Make a container div just inside body and put the image as bg for that.

Can you type an example?