CODEWITHSUNDEEP
htmlcsscss-sprites
zigojacko
zigojacko

Reputation: 2053

Responsive grid using image sprite as CSS background image

Wow, this was harder than I anticipated!

We're trying to use an image sprite as CSS background image on a responsive website in a grid.

Please check out our jsfiddle of the scenario.

So essentially, when this is resized, the background images from the sprite need to be resized to fit the parent container (<span>).

I have converted the background image to a data:image thinking this would be the first step (although I'm not sure) and now not really sure how I can make the background images from the sprite respond.

Everything I have tried so far ends up displaying the full sprite image in each container in the grid.

Upvotes: 1

Views: 575

Answers (1)

BurpmanJunior
BurpmanJunior

Reputation: 1008

You're using absolute pixel values and background sizes in fluid setting. Try converting your background-positions to a fluid unit (like percentage) and adding background-sizes to allow the spritesheet to resize with the container.

By removing the inner height of the image container and applying a padding, you can make the container's height ratio stay the same:

.credits-grid li span.image {
  background: url(../images/credits.png) no-repeat;
  padding-top: 90%;
  height: 0;
  overflow: hidden;
  background-size: 500% auto;
}

Then by calculating the percentage coordinates of the sprite's location instead of the pixel value, you can allow it to freely move into place as the container changes size:

.credits-grid li span.image.c10 {
  background-position: -26% 50%;
}

You can see this in action on this fiddle here: http://jsfiddle.net/nsvka987/2/

Upvotes: 2

Related Questions