CODEWITHSUNDEEP
cssretina-display
Steve
Steve

Reputation: 1765

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?

Upvotes: 2

Views: 1031

Answers (2)

Jacob G
Jacob G

Reputation: 14172

Your question is a little vague, but I am assuming you are asking how to make the background-image fill the div, and not get cut off. You can do it by changing the background size like background-size:auto 100%;:

div{
    height:200px;
    background:url(http://i112.photobucket.com/albums/n180/SRD001/screenshots/mesopotamia_shadow.jpg);
    background-size:auto 100%;
    resize:both;
    overflow:hidden;
}
<div></div>

Codepen
Or, in your code:

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

In the above demo's the image fills as much space as possible, no @media queries needed.

Upvotes: 0

kthornbloom
kthornbloom

Reputation: 3720

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.

Upvotes: 1

Related Questions