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
5,449 PointsMobile 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
25,165 Pointshttp://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!