The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Why might this image be distorted on only certain browsers?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #163569

    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?


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


    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).

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.