Search code examples
htmlcsscss-sprites

How can I put sprite backgound image inside the container?

I have a sprite image which is a contian of two images. But they are always bigger than the container, I want to fix/put them inside the parent container. How can I fit images without increasing parent size?

background parent has a red border

HTML:

<body>
<div><span class="affiliate-sprite-60"></span></div>
<div><span class="affiliate-sprite-40"></span></div>
</body>

CSS:

.affiliate-sprite-60
{
background:url('affiliate-sprite.jpg') 0px -1px;
width:799px;height:440px;
display:inline-block;
}

.affiliate-sprite-40
{
background:url('affiliate-sprite.jpg') -799px -0px;
width:783px;height:441px;
display:inline-block;
}
div {
width: 600px;
border: 2px solid red;
}

This is the original image: enter image description here

Solution

  • CSS image spriting doesn't involve resizing the images. Indeed one of the benefits of CSS spriting is that it can help reduce the CPU load on the browser because it avoids the need for the browser to resize individual images before rendering them.

    You have two options:

    1. Resize the images within the sprite with an image editing tool

    2. Increase the width of the parent container.