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

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

https://browser-update.org/

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