(Really) Long Background Image Does Not Render on iPad Safari

Question

For some unknown reasons, iPad Safari doesn\'t display a really long background image. In my example, the background image is 1,000 x 10,000 pixels. The same example works o

Answer 1

You can achieve this by using multiple background images. Slice up your long jpeg into manageable chunks that conform to the limit, and then use css3 magic to merge them all up into a single background.

For example I sliced up a 7400px high image into 2048px chunks and position them back together with this:

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg');
background-position: center 0px, center 2048px, center 4096px, center 6144px;
background-size: auto auto;
background-repeat: no-repeat;

This loads on the iPad at full resolution.