Resizing background sprite image to fit div

Question

I am creating a card game . I have a sprite image of cards . Say in the sprite , each of the cards is 50px wide and 80px high . Now I have some divs where I want to place these cards .

Say the Divs are 100px wide and 160px high .

I have using the first image as a Sprite for the Divs like in the below.

background: url(../images/poker_sprite.gif) no-repeat scroll 0 0 transparent ;

I vary the x and y positions so that different divs get diff cards .

What CSS property do I use to make the background image fit to the Div ? I am not allowed to change the size of the Sprites or the Div .

Now I am going to Drag these cards and place them into some slots as marked 1-13 below .

So the card div will have variable width . The background image will need to resize to fit in the variable width div . How do I go about doing this ? Should I used multiple sprites of various sizes?

Thanks !

Answer 1

Another solution is to create an SVG and assign class attributes to the different path groups (each representing/rendering a card). If all path groups have position: absolute and display: none, you could show only the path group matching the container card element and stretch it to full width and height with pure vector resizing.

This will generate huge amounts of markup, so the best thing here would probably be on SVG per card.

Chris Coyier has an excellent article about using SVGs.

Example

HTML+SVG

<div class="card card-hearts-ace">
    <svg id="cards-svg" ...>
        <g class="svg-card svg-card-hearts-ace">
            <path fill="#FF0000" d="..." />
            <path fill="#FF0000" d="..." />
        </g>
        <g class="svg-card svg-card-hearts-2">
            <path fill="#FF0000" d="..." />
            <path fill="#FF0000" d="..." />
        </g>
        ...
    </svg>
</div>

CSS

.card .svg-card {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.card-hearts-ace .svg-card-hearts-ace {
    display: block;
}
.card-hearts-2 .svg-card-hearts-2 {
    display: block;
}
/* And so on... */