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


Jeremy Coleman
Jeremy Coleman
5,449 Points

Mobile Fixed Background w. Background-size:cover.

I'm having issues with this via my android and I assume ios. On the computer it works great. On mobile not so much.

If possible I'd rather not reconstruct my site to achieve the desired goal.

My website is www.badrabbitdesigns.com

Thank you in advance.

1 Answer

Tom Checkley
Tom Checkley
25,165 Points

http://caniuse.com/#search=background-attachment http://caniuse.com/#search=background-size

This site is super helpful for working stuff like this out. I would also recommend using something like modernizr to set up fallbacks.

One possible fallback would be to set a div with position fixed z-index 0 and then having a wrapper over the top with your content with a higher z-index. This would help if the background attachment is the issue.

The background size issue is a bit of a pain. I'm not 100% sure if this is the best alternative, though I tend to crop the image to rough estimates for screen widths/orientations and use media queries. For example portrait, landscape, small, large. Most browsers support cover now so if you use this method as a fall back it should be ok. Also as developers I'm all up for stopping people using rubbish browsers. I would recommend attaching something like


I hope this helps, your site looks really good on my laptop!