0

I read a lot about this topic the last days, but I didn't find a solution. I have two sprite sets, one with low quality for normal displays and one with high quality for retina displays.

My problem is, that my site has to be responsive, graphics should resize depending on the browser window. But with the background-size property, it seems that I can't tell the browser to resize the sprite. Here is what I got so far:

#logo-img {
  max-width: 100%;
  text-indent: -9999px;
  height: 85px;
  width: 360px;
  background-image: url('/images/sprites-sa026cef942.png');
  background-position: 0 -2609px;
  background-repeat: no-repeat;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5) {
    #logo-img {
      background-image: url('/images/sprites-retina-se61e802cf4.png');
      background-position: 0 -2601px;
      -webkit-background-size: 360px, auto;
      -moz-background-size: 360px, auto;
      -o-background-size: 360px, auto;
      background-size: 360px, auto;
    }
}

The HTML is

<a href="#" id="logo-img">
  <h1>My logo text</h1>
</a>

Everything works fine, except on mobile devices, or when resizing the browser window. The logo gets cutted, and doesn't resize to the browsers window. I was playing with max-width: 100%; and height: auto; but this only effects the outlines, not the sprites within.

Hope anyone knows a solution. It doesn't have to be IE8 compatible, but it would be nice ;)

EDIT Before using sprites, I used background-size: contain; to make sure, that the background image gets resized to the size of the element:

#logo-img {
  background:url(../images/sprites-retina/logo.png) no-repeat center center;
  background-size: contain;
  max-width: 100%;
  text-indent:-9999px;
  height: 85px;
  width: 360px;
  overflow: hidden;
  outline: 0 none !important;
  display: block;
  white-space: nowrap;
}

This worked well, but then I can't use a spritesheet. Maybe that makes it clear what I mean.

EDIT2

I made a fiddle http://jsfiddle.net/euvRD/2/

23tux
  • 14,104
  • 15
  • 88
  • 187

1 Answers1

3

I think you need to remove the comma from the background-size lines and you might want to set the height to 85px as well:

-webkit-background-size: 360px 85px;
-moz-background-size: 360px 85px;
-o-background-size: 360px 85px;
background-size: 360px 85px;

But the comma is the main problem here, I think. Did that help you?

ditscheri
  • 579
  • 2
  • 9
  • hmmmm, thats weird, because the background-size stuff gets generated through Compass (http://compass-style.org/). But I tried it out and it didn't help, the sprite inside gets still cutted. Any other ideas? – 23tux Sep 26 '12 at 10:06
  • do you have a link to live example? or could you maybe create a jsfiddle showing your problem? – ditscheri Sep 26 '12 at 10:30
  • btw, resizing the browser doesn't effect the `device-pixel-ratio`, so you probably can't test the effect in your browser, but only on a device with the according resolution. – ditscheri Sep 26 '12 at 10:32
  • I made a fiddle: http://jsfiddle.net/euvRD/. If you resize the browser window the first luigi pic doesn't gets resized, its based on a spritesheet. The second is a single image with ``background-size: contain;`` and this gets resized – 23tux Sep 26 '12 at 10:37
  • Hm, so you want to do different things at once. To resize the logo, you could use a media-query `max-width` like in this example: http://jsfiddle.net/euvRD/2/ But this doesn't make use of the `device-pixel-ratio`. Still, you get the desired effect of a higher resolution, since the sprite background gets scaled down to its half of 998px/2=499px. Not too sure, whether that helps or not. – ditscheri Sep 26 '12 at 11:16
  • thanks, that could be a possible workaround. But I'm having a fluid layout and everything is resized to the browser window. So I would have to define several steps for different browser width. Any other idea? – 23tux Sep 26 '12 at 12:14