Tuesday, 28 May 2013

Streaks in Background Image on iPad

Streaks in Background Image on iPad

I am using a tile-able background image on my website. The site views great in all desktop browsers but when I view the site on my iPad Mini (running latest iOS 6) 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. How do I track down the code that is causing this? I do not know what to look for.

No comments:

Post a Comment