0

So I plan on making this really long image, its small right now, but I increased the height out to how long I expected it to be. Here's my code so far:

    <!doctype html>
<meta charset="utf-8">
<head>
<style>
body {background-color: black}
.image {background-image: url('http://i.imgur.com/JrsEkO9.jpg');
        width: 640px;
        height: 25000px;
        position: absolute;
        left: 50%;
        top: 40%;
        margin:-228px 0 0 -400px;
        repeat-x: no;
        -webkit-background-size: 640px 25000px;
        min-width: 640px;
        min-height: 25000px;}
</style>
</head>
<html>
<body>
<div class="image">
</div>
</html>
</body>

It looks like I was hoping it would on a desktop, but when opened on an ipad the image is fuzzy. Any suggestions? Here's a link to see the problem: http://bit.ly/HrG9oc

pnuts
  • 58,317
  • 11
  • 87
  • 139
JSNewb
  • 65
  • 2
  • 7
  • I am not very knowledgeable about retina displays, but i stumbled across this site while looking into your problem. It may provide some understanding for you. https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1 – Shawn Nov 05 '13 at 23:38
  • 1
    There's a couple ways to go about this. The way I handle it, is by having an image twice the size as it needs to be. So give the image height and width of 1200px, but the images actual dimensions are 2400px. Since retina display have twice the pixel density of a normal display, this is a quick and dirty work around, if image file sizes are secondary priority to image clarity on retina display. – Mathias Rechtzigel Nov 05 '13 at 23:42
  • Research `media queries` and `retina images`. Also this might help http://stackoverflow.com/questions/16154494/retina-displays-high-res-background-images/16154726#16154726 – Turnip Nov 06 '13 at 00:12

0 Answers0