CODEWITHSUNDEEP
css
user1896653
user1896653

Reputation: 3327

backgroud-size with background-position in css sprite image

I have three (3) social icons in one image and same icons with double size for retina display in another image. I thought my CSS would be like this:

.social-media li a {
    width: 44px;
    height: 48px;
    background: url('social-media.png') no-repeat;
} 

@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) { 
    .social-media li a {
        background: url('[email protected]') no-repeat;
        background-size: 44px 48px;  /* same with width & height of normal (non-retina) image for fitting in equal space */
    }
}

But, it seems that background-size creates issue here. But, without that property, I can't fit retina display's image in 44 x 48 (normal image's block) dimensional block. What's the proper way?

In my fiddle below, you'll see, I have put three block. 1st one is for normal image, 2nd one is for displaying retina's image demo with their original double size (it's basically to examine correctness of my background-position), and last one is for displaying retina's image demo within normal image's size block (as I like to check that at first at normal device instead of retina device to see how they will behave in retina device).

In short, I need my last block's result correctly.

Fiddle Demo.

#normal .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#normal .social-media li {
  float: left;
  margin-right: 20px;
}
#normal .social-media li:last-child {
  margin-right: 0;
}
#normal .social-media li a {
  width: 44px;
  height: 48px;
  background: url('http://i.imgur.com/xr8VaHh.png') no-repeat;
  display: block;
}
#normal .social-media li a.facebook-icon {
  background-position: 0 -60px;
}
#normal .social-media li a.facebook-icon:hover {
  background-position: 0 0;
}
#normal .social-media li a.twitter-icon {
  background-position: -64px -60px;
}
#normal .social-media li a.twitter-icon:hover {
  background-position: -64px 0;
}
#normal .social-media li a.linked-in-icon {
  background-position: -128px -60px;
}
#normal .social-media li a.linked-in-icon:hover {
  background-position: -128px 0;
}
/***************** For Retina background image with original size **************/

#forRetinaOriginalSize .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#forRetinaOriginalSize .social-media li a {
  width: 88px;
  height: 96px;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  display: block;
}
#forRetinaOriginalSize .social-media li a.facebook-icon {
  background-position: -30px -141px;
}
#forRetinaOriginalSize .social-media li a.twitter-icon {
  background-position: -157px -141px;
}
#forRetinaOriginalSize .social-media li a.linked-in-icon {
  background-position: -285px -141px;
}
#forRetinaOriginalSize .social-media li a.facebook-icon:hover {
  background-position: -30px -21px;
}
#forRetinaOriginalSize .social-media li a.twitter-icon:hover {
  background-position: -157px -21px;
}
#forRetinaOriginalSize .social-media li a.linked-in-icon:hover {
  background-position: -285px -21px;
}
/***************** For Retina background image with normal size **************/

#forRetinaNormalSize .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#forRetinaNormalSize .social-media li a {
  width: 44px;
  height: 48px;
  display: block;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  -webkit-background-size: 44px 48px;
  background-size: 44px 48px;
}
#forRetinaNormalSize .social-media li a.facebook-icon {
  background-position: -30px -141px;
}
#forRetinaNormalSize .social-media li a.twitter-icon {
  background-position: -157px -141px;
}
#forRetinaNormalSize .social-media li a.linked-in-icon {
  background-position: -285px -141px;
}
#forRetinaNormalSize .social-media li a.facebook-icon:hover {
  background-position: -30px -21px;
}
#forRetinaNormalSize .social-media li a.twitter-icon:hover {
  background-position: -157px -21px;
}
#forRetinaNormalSize .social-media li a.linked-in-icon:hover {
  background-position: -285px -21px;
}
/* HiDPI support for Normal */

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
  #normal .social-media li a {
    background: image-url('http://i.imgur.com/Cif180D.png') no-repeat;
    -webkit-background-size: 44px 48px;
    background-size: 44px 48px;
  }
  #normal .social-media li a.facebook-icon {
    background-position: -30px -141px;
  }
  #normal .social-media li a.twitter-icon {
    background-position: -157px -141px;
  }
  #normal .social-media li a.linked-in-icon {
    background-position: -285px -141px;
  }
  #normal .social-media li a.facebook-icon:hover {
    background-position: -30px -21px;
  }
  #normal .social-media li a.twitter-icon:hover {
    background-position: -157px -21px;
  }
  #normal .social-media li a.linked-in-icon:hover {
    background-position: -285px -21px;
  }
}
<div class="container">
  <div class="row">
    <div class="col-xs-12" id="normal">
      <h3>1. Normal Background Image</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>

    <div class="col-xs-12" id="forRetinaOriginalSize">
      <h3>2. For Retina Background Image (with Original size of itself)</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>

    <div class="col-xs-12" id="forRetinaNormalSize">
      <h3>3. For Retina Background Image (with Normal or compressed size)</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1017

Answers (2)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48590

The age of image icons is over. You should switch to using a glyph icon library. They are cleaner and, since they are a font/vector, scale to almost any size.

By combining this CSS Hexagon tutorial with Font Awesome I have created an alternative which does not rely on sprites or aliasing of images.

If you are using SASS or SCSS, this CSS below can be reduced even more.

.social-media:before, .social-media:after {
  position: absolute;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  content: " ";
  width: 0;
  height: 0;
}
.social-media:before {
  top: -30px;
  border-bottom: 30px solid #6C6;
}
.social-media {
  display: inline-block;
  margin-top: 30px;
  width: 104px;
  height: 60px;
  background-color: #6C6;
  position: relative;
}
.social-media:after {
  bottom: -30px;
  border-top: 30px solid #6C6;
}

.social-media span {
  text-align: center;
  width: 100%;
  font-size: 3em;
  line-height: 1.25em;
}

.social-media:before { border-bottom: 30px solid #000000; }
.social-media { background-color: #000000; color: #FFFFFF; }
.social-media:after { border-top: 30px solid #000000; }

.social-media.facebook:hover:before { border-bottom: 30px solid #0268A0; }
.social-media.facebook:hover { background-color: #0268A0; color: #FFFFFF; }
.social-media.facebook:hover:after { border-top: 30px solid #0268A0; }

.social-media.twitter:hover:before { border-bottom: 30px solid #03BEE4; }
.social-media.twitter:hover { background-color: #03BEE4; color: #FFFFFF; }
.social-media.twitter:hover:after { border-top: 30px solid #03BEE4; }

.social-media.linkedin:hover:before { border-bottom: 30px solid #0098DC; }
.social-media.linkedin:hover { background-color: #0098DC; color: #FFFFFF; }
.social-media.linkedin:hover:after { border-top: 30px solid #0098DC; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />

<div class="social-media facebook">
  <span class="fa fa-facebook"></span>
</div>

<div class="social-media twitter">
  <span class="fa fa-twitter"></span>
</div>

<div class="social-media linkedin">
  <span class="fa fa-linkedin"></span>
</div>

SCSS Rule

@mixin hex($bgcolor:#000000, $fgcolor:#FFFFFF) {
  &:before { border-bottom: 30px solid $bgcolor; };
  background-color: $bgcolor; color: $fgcolor;
  &:after { border-top: 30px solid $bgcolor; };
}

.social-media { @include hex(); }
.social-media.facebook:hover { @include hex(#0268A0); }
.social-media.twitter:hover { @include hex(#03BEE4); }
.social-media.linkedin:hover { @include hex(#0098DC); }

Upvotes: 0

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

You'll need to divide all sizes by 2 using images for high-denisity device (@2x), for this you need even sized image (as all sizes will be divided by 2) to look good.

I've modified facebook icon for example: https://jsfiddle.net/wqkewd03/3/

#forRetinaNormalSize .social-media li a {
  width: 44px;
  height: 48px;
  display: block;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  -webkit-background-size: 268px 129px;
  background-size: 268px 129px;

#forRetinaNormalSize .social-media li a.facebook-icon {
  background-position: -15px -70px;
}

#forRetinaNormalSize .social-media li a.facebook-icon:hover {
  background-position: -15px -10px;
}

I usually use "@2x" as default (for that kind of images: icons, etc.) with this method, images are not too much larger, scaling is not bad with todays browsers so why not to use 1 version and half of code you need to target it specifically. And it seems to be future-proof when high density desktop screens arrive.

Upvotes: 1

Related Questions