CSS Sprites with Dynamic Sizing

CSS Sprites with Dynamic Sizing

Well, if you really want an answer, sure, why not. See: http://jsfiddle.net/3dsgn/3/

Basically we're working with CSS3 here, so IE support (except 9) is non-existent. You'll also have to use the version with the -moz- extension for Firefox 3.6 and below. The technique itself is also somewhat troublesome. You actually have to go and calculate the numbers yourself - percentages won't work, naturally.

#sprite-large {

    /* All of these numbers are 2x their normal, 
       though tweaked slightly so that they will look okay */
    width: 36px;
    height: 36px;
    background: url('url/to/your/image.png') -38px -112px;

    -moz-background-size: 448px 368px;
    background-size: 448px 368px;
}

How to dynamically resize CSS button sprites (background image)?

You can use the background-size to set this, as your images are as tall as the buttons but twice the width, you can use ' background-size:200% 100%;'

and then to "switch" the image to the next one you can change the position to be 100%

body {  background-color: rgb(0,0,0);  margin: 0px;   border: 0px black;  padding: 0px;  }
 #parent {  background-color: grey;  width: 80vw;  font-size: 0;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);       display: flex;  align-items:center;  justify-content: center;         }
  a{  height: 100px;  display: flex;      }  
            #alpha a{                          width: 100px;   
  background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 0 0;            background-size:200% 100%;      }          #alpha a:hover {                         width: 100px;      background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0;             background-size:200% 100%;     }            
            #beta a{                         width: 100px;        background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png")0 0;      background-size: 200% 100%;
        } 
       #beta a:hover {             width: 100px;
  background: url("https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png") 100% 0;         background-size:200% 100%;            }

<div id=parent> 
    <div id="alpha"><a href="#"></a>    </div>    <div id="beta"><a href="#"></a>    </div>  </div> </body>

Dynamically resizing sprite images with CSS

This resizes it like you want (in Firefox at least, haven't tested elsewhere). Mainly have to use %'s, not fixed size in order to scale.

.HS {
 display: inline-block;
 position: relative;
 text-indent: -9999px;
 width: 100%;
 height: 75%;
 background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
 background-position: 0px 0px;
 background-size: 800%;
}

.HS span {
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 background-image: url("http://www.hugoproject.com/ftp1/images/icons.png");
 background-position: 0px -100%;
 opacity: 0;
 width: 100%;
 height: 100%;
 background-size: 800%;
 -webkit-transition: opacity 0.5s;
 -moz-transition:    opacity 0.5s;
 -o-transition:      opacity 0.5s;
}

.project {
 float: left;
 text-align: center;
 width: 33.3%;
 height:100%;
}

Another, possibly better, option would be to actually crop your PNG into separate images rather than selecting the position so that you can use the same CSS as with your other images.

Generating CSS sprites for dynamic images

You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically.
You may arrange bundles for switching css file(s) for changing skin(s).

Plus side: You can also manage and arrange your .js files too!

responsive sprites / percentages

The div dimension doesn't play in the calculus, only the background sizes, and the part that you are going to use.

Lets say that your background has a width of 1000px and a height of 500px.

The image that you are going to use has 80px width and height.

background-size:

x part     1000px / 80px = 12.5   ->> 1250%
y part      500px / 80px = 6.25   ->>  625%

background-size: 1250% 625%;

background-position:

x-part     173px / 1000px = 0.173   ->> 17.3%
y part     293px / 500px = 0.586    ->> 58.6%

background-position: 17.3% 58.6%;

---

Related Topics