Html css

Responsive Background Image Sprites In CSS

Posted by Weston Ganger

March 15, 2016

Using sprites is pretty sweet I think. You will probably need to make it responsive at one point.

Heres how to do it using plain CSS.


<div class="sprite-container">
  <div class="sprite"></div>
</div>

.sprite-container{
  width: 400px;
}

.sprite{
  /* Create a Responsive Square */
  width: 100%;
  height: 0;
  padding-bottom: 100%;

  /* Set The Sprite as the Background */
  background-image: url("images/ourimage.png");
  background-position: 0 0;
  background-size: 200%; //number of images horizontally * 100
  display:block;
}

/* On Hover Show Second of Two Images */
.sprite:hover{
  background-position: 100% 0;
}


Related External Links:

Posted in HTML / CSS and Tagged with sprites

Recommended Posts

Contact

604-309-8713
info@solidfoundationwebdev.com

Westonganger profile

Send Me A Message

I would love to get in touch and talk about your next project. Feel free to send a message and I will get back to you shortly.


Get Connected