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.
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