CODEWITHSUNDEEP
csshtmlipad
nasty
nasty

Reputation: 7077

How to keep background image size on iPad

I have a 2px X 4px background image on my website and it repeats through X and Y.

When I view it on iPad, the background shrinks or something, it just looks burled. How can I keep it clear and achieve 2px X 4px on iPad? Thanks guys.

Upvotes: 1

Views: 417

Answers (2)

nasty
nasty

Reputation: 7077

Ok This if what I did.

Set view port to 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

and that fixed the image issue. But I cant zoom in and out anymore. But its not necessary for this project. :) Thanks for the help

Upvotes: 0

Parker Young
Parker Young

Reputation: 1165

The blurring is most likely being caused by the iPad retina display trying to upscale your small background image. Same thing happens on iPhone 4 vs iPhone 3, as well as newer android devices. Use the following code in your CSS to fix that. You will need a 2px by 4px image as your original background, along with that same image at double resolution (4px by 8px). The @media query allows you to resize your @2x version of the image, then 'shrink' it back down to the intended size with background-size: 4px; in the css.

body {
    background: url(test-image.png) repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (min-device-pixel-ratio: 2) {
           body {background: url([email protected]) repeat; background-size: 4px;}
}

I've tested this snippet on my iPad retina and it fixed the blurring. I hope this helps you out, let me know if you have any questions!

Upvotes: 1

Related Questions