Fixing Background Image Sizing In iOS
Recently I had two customers who replaced the image backgrounds in their main content wrapper with a body background that had a strip built into it for their content. This is a useful tool to have in your designer’s toolbox and they had done a great job with the modification. The only problem was it did not look right on mobile devices. The background wasn’t resized proportionally with the rest of the content.
After a good bit of searching, I found a solution. All that is required is to add a small code snippet to your body tag like this:
body { -webkit-background-size: 940px 2574px; }
Just replace 940px with the height in pixels of your image and the 2574 with the width. Since iOS’s and Android’s are all built on webkit, this should work with the iPhone, iPad, iPod Touch and Android devices. Publish your changes and that’s it.
This seems to mess up the background size in Chrome. Any thoughts on what to try next?
You could always wrap the style inside a media query that uses the device width property. That way you could target phones and tablets without impacting Chrome and other desktop browsers.
Thank Bill I’ll try that. Really don’t want to make & maintain a separate site for iOS and the rest of the online world.
I completely agree. Keeping separate sites is for the birds.
Pingback: Quick Coding Tip: Body Class for iOS Devices (Cache Friendly!) | 10up