Question

I am creating a div which contains a background image which is sized to it’s container using the background-size property. Currently, this div has a separate normal and hover state. I’m trying to combine them both into a sprite but can’t quite get it to display correctly.

Here is my code:

.thumb {
width: 18.454%;
}

.thumb .image {
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}

.thumb img {
width: 100%;
max-size: 204px;
}

The .thumb div gives the image a width, the .image div sets the background image, and the .thumb img is a img inside the .image div which is just to retain the image proportions when dynamically sized.

I just need to know how to change the background-position: so it works dynamically. Currently, when I use -100% 0 to move the image over, it does move, however, is at the incorrect spot in the sprite.

Thanks!

Answer 1

The error in sizing (about 4px off) was caused by the .image div line-height.
This fixed the problem.

.thumb .image {
line-height: 0; /* FIXED */
background-image: url('/assets/image.jpg');
background-position: -100% 0;
background-size: cover;
}