Correct. From what I understand you create the image at 200% of what you are going to display it as and use CSS to shrink it. I think there is a css property to target retina displays so it doesn't load that image for every device. This saves in file size if the image is quite large.

Pretty much the below is very simple example of how to work with retina images.

element {
    background-image: url('/path/to/non/retina/image.png');
    height: 200px;
    width: 200px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    element {
        background-image: url('/path/to/retina/image.png');
        background-size: 200px 200px;
    }
}

To put it simply you would design the above example image at 400x400 but use the background-size property to scale it down which doesn't blur or distort the image because it was created at a sub pixel level unlike the non-retina image which would sit on top of every pixel within 72 dpi.

Anyone know how to do this with tiled background images?

Is the image your using something like 1x50 as an example?

If you could supply a link as all you would need to do is re-design the image @2x the width and height then save the file using the Apple naming convention.

Non-Retina my-image.png

Retina my-image@2x.png