Background image css issue on iphone/ipad (not responsive)

Question

I've got a site which although not responsive, should just show a scaled version of the desktop site when viewed on iphone or ipad. The problem is that my main background image is being compressed for some reason. If I resize the browser I can't recreate this issue, so am just struggling to figure out what's going on iOS which is causing it. The site is - any help would be greatly appreciated!

Added info: the issue seems to be with div.bg-main and it's background image settings, set on line 243 of style.css

Answer 1

iOS has a 2 megapixel limit on background images. Your image is 1587*1340 = 2,126,580 pixels - a bit too much. It therefore shrinks it.

You can use the background-size property to fix the size back up to what you're expecting. You'll lose some detail but it'll be the correct size. Add this to your CSS:

.bg-main { -webkit-background-size: 1587px 1340px }

Answer 2

You can chop your big image with 2 parts and add 2 backgrounds to a div.

Like this:

background: url(1.jpg) top center, url(2.jpg) bottom center

Answer 3

That image is huge, maybe that is the issue. Try reducing the size with 'save for web' (try getting the design to work with a .jpg).