Background Image not Displaying Correctly in iOS

Question

I am using a tile-able background image on a website. The site views great in all desktop browsers but when I view the site on my iPad Mini (running iOS 6.1.3) the background image has streaks in it. You can see a pattern on most pages that is a line (the size of the background image) that looks fine, then another line again the same size of the background image, etc.

Here is a screenshot showing the issues:

Here is the CSS required for the background:

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg); 
}

I tried clearing the cache of the iPad but that did not work. I am at a loss as why this is happening. How do I prevent and solve this issue?

Update

I created a jsFiddle of the wrapper. It looked okay on the website. So I am left to assume it is somewhere in my code. However, this doesn't always happen immediately on the site. It may happen with the Fiddle but I have not seen it happen. If it is my site how do I track the code that is causing the issue?

Update 2

I changed the background image to the html, bodytags and the issue still happens but isn't as bad and will clear it self. I am still left wondering how I prevent the issue all together.

Update 3

I tried @Riskbreaker's idea of switching to PNG. This did not work. I still see the lines. It also increased the background file substantially (from 30k to almost 200k). I also tried a completely different background image thinking it may be the image itself but I still saw the error. I switched back to jpg for file size considerations.

How do I solve this issue? Is it an iOS issue or something in my code?

The site in question is http://www.lfrieling.com/. I only see this on my iPad Mini running iOS 6.1.3 (latest as of this writing). I do not see this on my iPhone running same version of iOS. Also you see this on long pages more than other pages. See Professional > Resources.

Answer 1

Try this, This may help you. Add overflow: hidden; height: 1%; to your #wrap.

Answer 2

Have you tried hardware acceleration? Add -webkit-transform: translateZ(0); to the same css as your adding the background. This is my guess because it appears to be a rendering issue and hardware acceleration fixes rendering issues when you use css transitions in Chrome.

#wrap {  
   margin:0 auto; 
   position:relative; 
   padding:0; 
   background: #B3B1B2 url(/images/bgs/parchment2.jpg);
   -webkit-transform: translateZ(0); 
}

Or maybe try retina display images for devices that support them using media queries?

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
  #wrap {  
   background: #B3B1B2 url(/images/bgs/parchment2_2x.jpg);
  }
}

Media Query source *

To solve the rendering issues you can try adding -webkit-transform: translateZ(0); to other tags that are also wrapping content on the page. This may prevent loading/rendering issues.

Answer 3

Try adding -webkit-background-size to the body tag:

body {
    -webkit-background-size: 512px 512px;
}

Answer 4

Lynda First of all this is a good looking website . Second you should take in consideration these two advises :

1. The @media Rule

   and write a CSS file rules for each device ( here some a List of medias )

2. Test your website on any screen size including desktops, tablets, televisions, and mobile phones.

Thats all i think i have helped you .

Answer 5

Try if this may help,

after adding repeat to #wrap,

and add overflow:auto; to .height

as the image size is 512x512 and .height is 2000.

updated fiddle

I am not sure this will work but the problem is while rendering the inner image its not able to render the background properly,

FYI : -webkit-transform: uses gpu, so if the device is not gpu enabled then also you will face problem..

Hope this will do..

Answer 6

Have you tried background: #B3B1B2 url(/images/bgs/parchment2.jpg) repeat;. Not sure it will solve the problem, and I don't own an iPad to test it but it's worth a try.