How to Dynamically Size Multi-CSS Sprite Image

Scaling an image sprite, using percentage: Possible?

If you'd want a simple fix without worrying about crossbrowser-issues, I'd suggest to use a normal image.

Next, one could use data URIs or use a combo of zoom for webkit/ie and -moz-transform:scale for Firefox or finally break your head on background-size calculations.

You might also want to read: How can I scale an image in a CSS sprite

Hope this helps!

Dynamic Sprite Image Generate In memeory

One possibility is to generate the images as Data URIs. This would include all the image data in the response, ready to be displayed by the browser without making additional requests.

I.e. instead of a normal HTML page where you'd have

<img src="http://myserver.com/img/123.png"/> which would create a request to the server, you would include the data directly in the page as
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />

If you're not satisfied even with that, the last option would be to bunch up all the images to a single huge image, load that offscreen and use CSS trickery to grab parts of the big image to be displayed.

If all else fails, get a beefier server, they're not that expensive.

Dynamically sizing tab made of images

This is a simplified version that works:

<div style="background: url('BlueTabSprite.png') no-repeat; width: 290px; min-width: 120px; max-width: 290px; height: 23px;">
<div style="float: right; background: url('BlueTabSprite.png') top right no-repeat; width: 10px; height: 23px;"></div>
Test
</div>

css image building with sprites

add float: left to .icon .brigade

.icon .brigade {
    float: left;
    margin: 0;
}

this should fix everything you need or get you in the right place to finish it off!

the spacing between the purple boxes is because you were using display: inline-block; and the white space in your markup between these divs, generates that spacing.

the icon is not rendered "above" the boxes because it's missing the top: 0; declaration

How can I scale/stretch/skew a sprite from a sprite sheet with javascript?

You can do it with CSS3 transform. Or use a hidden canvas element, apply a transformation and then drawn it to the main canvas.

Resizing background sprite image to fit div

You can achieve this using the background-size property, although the results might not be too pretty, since it stretches the background image.

So, if you know that your sprite is 13x5 cards exactly in size, you can give the cards background-size: 1300% 500% and then size them any way you want, since the background itself will scale accordingly.

Example

JSFiddle: http://jsfiddle.net/uLnzc/.

HTML

<!-- Hearts --->
<div class="card card-hearts-2"></div>
<div class="card card-hearts-3 card-wide"></div>
<div class="card card-hearts-4 card-high"></div>

<!-- Clubs -->
<div class="card card-clubs-q"></div>
<div class="card card-clubs-k card-wide"></div>
<div class="card card-clubs-a card-high"></div>

CSS

.card {
    width: 81px;
    height: 117px;
    background: url('http://i.stack.imgur.com/WZ9Od.gif') no-repeat;
    background-size: 1300% 500%;
}
.card-wide {
    width: 100px;
}
.card-high {
    height: 130px;
}

/**
 * Backgrouns position of all the cards
 *
 * x offset in %: i * (100/x); i = 0, 1, ..., (x - 1); x = the number of cols in the sprite
 * y offset in %: j * (100/y); j = 0, 1, ..., (y - 1); y = the number of rows in the sprite
 */

.card-hearts-2 { background-position: 0 0; }
.card-hearts-3 { background-position: 8.33% 0; }
.card-hearts-4 { background-position: 16.667% 0; }
/* ... */

/* ... */
.card-clubs-q { background-position: 83.333% 50%; }
.card-clubs-k { background-position: 91.667% 50%; }
.card-clubs-a { background-position: 100% 50%; }

You can read about offsetting backgrounds in percentages at MDN.

JSFiddle: http://jsfiddle.net/uLnzc/.

---

Related Topics