Hi DrFingerless,
please set the dimensions via html on that image to 550×135 and you should be good to go.
I’ll add this note in the FAQ
Thanks for this advice, Greggh3. I’ll give it a shot and let you know how I go. I’m just wondering how this might be applied to background images where the size is not able to be expressed explicitly in the html. What are your thoughts?
If you’re doing images as background images in css, you’ll need to set the width and height of the div or element you’re styling. You’ll also want to set the background-size correctly for the retina declaration.
something like
background-size: 550px 135px;
Greg, the site that I am working on is located at http://partito.draftsite.net.au. You can see that there are a couple of background images for the site (the triangular confetti images top-left and bottom-right). These images are set as page backgrounds and are designed to show more or less depending on the volume of content within that div. Like most background images their great advantage is that you often don’t specify the size of the div that they background, particularly in a no-repeat situation – you just position the image (often top-left) and let the div expand to fit its variable content allowing as much or as little of the background image to be visible (a varying amount). In our case in most circumstances the background images will be nearly always completely visible, but the div could expand well beyond their borders. The point being that it is not usually known what size the div will exhibit, and it will vary depending on what content the author adds or removes from the site. In that case how should I proceed?
Further, is the background-size attribute meant to tell the retina image to display at, for example, 200 x 200 or to display in retina dimensions as 400 x 400?
By the way your advice regarding inline images was spot on – we have those images behaving well.
I haven’t tested this a ton, but setting the background size css should work, you will just need to do this in a media query specific to retina devices. this will make it so the image scales to the right px size on retina devices.
so your image is might be 640×640 and the retina one is 1280×1280 but in the retina media query you’re setting the background size to 640×640.
That should work. Let me know if it doesn’t.
Greg, it doesn’t seem to have done the trick. You can see for yourself. The retina device is pulling the correct retina version of the background image (the triangle confetti image in the top-left corner of the site) but it is failing to resize according to the background-size declaration. I wonder if there is a problem with my media query declaration which is as follows (normal size is 550 x 734, retina is double this):
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina-specific stuff here */
#big-background-image {
background-size:550px 734px;
}
}
what retina device are you checking with? macbook pro? if so can you check in firebug and see if the background-size is working? I see it’s set at 100% in the regular css.
also i see big-background-image is 1500×725 and not 550×734
Greg, I seem to have had mixed results with these background images. I have two layered background images of triangular confetti on the above-mentioned site and it looks like I have got them to work on both retina and regular screens. But now there are some icons that are displayed as background images at the top of each blog post that you can see on the retina screen continue to be displayed at double size. I have set the widths of the containing element to the smaller size and set the same containing element’s background-size to be the same smaller size in the retina media query. I have uploaded the two image versions to the same directory with the larger having the same name as the smaller with the addition of @2x at the end of the name. Clearly I am still missing something. Any clues?
this could be a result of some css overriding your image width/height of those that are displaying too big. It could be a max-width declaration somewhere.
