On my website, 99% of the images are derived from sprite sheets in one image file to improve user experience (as opposed to having the server deliver hundreds of tiny separate images).
Here's my problem. I want to use shortened versions of the CSS background property on several elements in order to make the user download fewer bytes, however the attempts don't work.
Here's a shortened example of what I want to achieve. Say I have a DIV tag with IDs of value X, Y, and Z.
Then I declare a sprite sheet image named spritesheet.jpg for use with them as follows:
#X,#Y,#Z {background:url('spritesheet.jpg')}
So far, so good. Next I want box X to be 600 pixels by 5 pixels, Y to be 10 pixels wide by 20 pixels long, and Z to be 20 pixels wide by 10 pixels long. I then add this to my CSS code:
#X {width:600px;height:5px}
#Y {width:10px;height:20px}
#Z {width:20px;height:10px}
Then I want box X to be red, box Y to be green and box Z to be blue:
#X {background-color:#FF0000}
#Y {background-color:#00FF00}
#Z {background-color:#0000FF}
Let's say the sprite sheet is 200 pixels wide by 40 pixels long. I want box X, Y, and Z to take three different sections of the sprite sheet.
#X {background-position:0 -10px}
#Y {background-position:-60px -20px}
#Z {background-position:-110px -20px}
And, I want box X to keep repeating the tile:
#X {background-repeat: repeat-x}
As you can see, the declarations take many bytes:
#X,#Y,#Z {background:url('spritesheet.jpg')}
#X {width:600px;height:5px}
#Y {width:10px;height:20px}
#Z {width:20px;height:10px}
#X {background-color:#FF0000}
#Y {background-color:#00FF00}
#Z {background-color:#0000FF}
#X {background-position:0 -10px}
#Y {background-position:-60px -20px}
#Z {background-position:-110px -20px}
#X {background-repeat: repeat-x}
What I am trying to do is shorten the above code. This apparently does not work because it cancels out the image and the new properties override everything:
#X,#Y,#Z {background:url('spritesheet.jpg')}
#X {width:600px;height:5px;background:#FF0000 0 -10px repeat-x}
#Y {width:10px;height:20px;background:#00FF00 -60px -20px}
#Z {width:20px;height:10px;background:#0000FF -110px -20px}
Can someone suggest to me a way to load CSS sprites without having to declare background-position and background-repeat and background-color every time?
The reason why I ask this question is because I want to use progressive loading on my website to make it feel its loading faster, and whats especially important is the background position being applied after the loading of the image.
Modifying your CSS to the following:
#X,#Y,#Z {background:url('spritesheet.jpg') !important;}
Will fix all your problems.
Alternatively, you can also format your code so that the background image is called last:
#X {width:600px;height:5px;background:#FF0000 0 -10px repeat-x}
#Y {width:10px;height:20px;background:#00FF00 -60px -20px}
#Z {width:20px;height:10px;background:#0000FF -110px -20px}
#X,#Y,#Z {background-image:url('spritesheet.jpg')}`