Background Image Does Not Show On IPhone/iPad

There is a background image on our Magento web site that expands as needed due to the amount of content. It works fine on PCs and (hopefully Macs). But on any iOS device, the white

Solution 1:

The problem is that iOS has a limit on the maximum dimensions of images it can load. From memory, it's 3 to 5 megapixels, depending on the device. For reference, Your image is 9.78mp (978 x 10000).

Your background image has absolutely no reason to be that big. It's 171kb and it's repeatable after about 10px. Cut out the top and it could be 10px high and you could achieve the same affect using background-repeat: repeat-y instead. Then simply apply the top of the background to another element.

Alternatively, that background image could be replicated in css using a box-shadow and a dashed border.

CSS:

.outer {
  margin: 20px;
  width: 200px;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

.inner {
  height: 200px;
  border: 1px dashed #bde432;
}

HTML:

<div class="outer">
  <div class="inner"></div>
</div>

Demo: http://jsfiddle.net/WUpEF/