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
Stephanie Green
3,525 PointsBackground-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
Ali M Malik
33,293 PointsRight 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.
Ali M Malik
33,293 PointsIf 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
6,966 PointsThis works for me:
html {
background-image: url(../img/bg.jpg);
background-size: 100%;
}
Stephanie Green
3,525 PointsThank 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...
Stephanie Green
3,525 PointsActually 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
19,419 PointsAli's answer is a better practice though, Stephanie --- Make a container div just inside body and put the image as bg for that.
Stephanie Green
3,525 PointsCan you type an example?