Search code examples
cssretina-display

Trouble with Retina & CSS background image

I'm developing a site the owner wants private until launch.

The owner is on OSX, and I am on Windows.

On Windows, the site looks fine, like this: enter image description here

Note the blue banner with animals - the animals are displayed in full, and this banner is produced by CSS:

.ribbon-container {
    height: 78px;
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x;
}

From another Q&A, I've found some CSS to potentially solve a problem the owner had on OSX. On her computer, the blue banner doesn't display properly. It looks something like this:

enter image description here

It is produced by the CSS:

@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) { 
    .ribbon-container {
        height: 78px;
        background-size: 552px 78px;
        background: url('images/mesopotamia_shadow-x2.jpg') center bottom repeat-x;
    }
}

Note the image displayed is larger than on Windows. images/mesopotamia_shadow-x2.jpg (1104 x 156) click here for the image is twice the height and width of images/mesopotamia_shadow.jpg (552 x 78) click here for the image. Is this correct or not?

Is the CSS correct?

Solution

  • You could also try:

    .ribbon-container {
    height: 78px;
    background: url(images/mesopotamia_shadow.jpg) center bottom repeat-x;
    background-size:contain;
}

    Which should make the image fit within it's container.