Why might this image be distorted on only certain browsers?

[Josiahmann]

I have built this site and tested it on firefox, chrome, and safari on my mac and it looks fine. My client is seeing a distorted logo – she is using chrome on a mac as well.

Here is what the client is seeing in her browser – specifically the logo “creative types consulting” logo on the top left.

Here is the site I’m testing on.

Any thoughts?

[Paulie_D]

Sounds machine specific….unless someone can replicate it’s going to be hard to help.

[Senff]

Look into this part (the media query for retina screens):

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-moz-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min-device-pixel-ratio: 1.5) {

    .header-image .site-header .wrap {
        background: url(images/logo_2x.jpg) no-repeat left;
        background-size: 320px 164px;
    }

}

The image you’re using for the background is 800×156, but you’re sizing it into 320×164. As a result, it will be stretched vertically because you’re setting a different aspect ratio. Either use background-size: 320px auto; or background-size:320px 62px;. Or different dimensions altogether, but make sure the aspect ratio is correct (if you don’t use “auto” for the height).

[Author]

Posts