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
Paul Barron
6,595 PointsHow can I make my background responsive?
My site, 132media.com, has a photo as the background. For the life of my I can't figure out why the image won't fit inside a smartphone's screen. I want the resolution to look better. I can't figure out what's wrong. Can anyone help me with this?
3 Answers
Shaker Advertising
5,395 PointsWhy don't you art-direct the background image and re-set the background on the html property based on viewport size?
Example
html{
background: url(image-small.jpg) center center no-repeat;
background-size:cover;
}
@media screen and (min-width:32em){
html{
background: url(image-medium.jpg) center center no-repeat;
}
}
@media screen and (min-width:64em){
html{
background: url(image-large.jpg) center center no-repeat;
}
}
Andreas cormack
Python Web Development Techdegree Graduate 33,011 PointsHi Paul
Does background:size:cover property not work?? i have not personally tried it but it should scale the image based on the view port.
Paul Barron
6,595 PointsIt has the cover property. I just put them in each media query for good measure and nothing. Thanks for responding.
Sage Elliott
30,003 PointsHave you tried using a max-width property with a height of auto? Or do you already have other dimensions applied?
Paul Barron
6,595 PointsI tried max-width, but I'm not sure if I'm applying it right. Did you mean for me to put it in the html property. That's what I did and nothing. Thanks for the reply.
Paul Barron
6,595 PointsPaul Barron
6,595 PointsConnor Gaughan I'd like to know more about this technique. What resolution should they be at ? The images. I've tried this as well, but maybe the resolutions are bad. I'm also starting to think that Adobe's fluid grid based template might be affecting the outcome. But the styles sheet is below the boilerplate that contains the property attributes I'm trying to affect.
Shaker Advertising
5,395 PointsShaker Advertising
5,395 PointsPaul Barron Take a look at my site www.clubhousecreative.com and watch the main hero image change as you scale the page. Keep an eye on the source in the dev tools and you'll notice that the image is cropped at various sizes to best fit the size of the viewport.
As far as selecting what resolutions to make these breaks at is a while other story. I typically work with a mobile first approach and watch as the design starts to fall apart and I know at that point I need to introduce a new media-query.
Hope this helps.