css background position
After a little break from the web it is time to tackle one of the more irritating (but recently very popular) subjects of css in combination with background images. This series will tackle the pros and cons of sprites, it will tell you why sprites don't work very well yet (in some regards) and what should be changed to make it work flawlessly. To start off, this article will dig a little deeper into the issues of css background positioning.
history lesson
The background position property is an old css property that was conceived in a time when the web wasn't all that visual. Since that time the web has changed (a lot), not only design-wise but also in the way we apply css today and how we work around the current problems that are present in css.
Background images became crucial in our everyday css work. We use them to simulate rounded corners (with or without borders), fake columns, special font-faces (unless you are using sIFR) and most other none-supported visual effects. Rather than just serve as a little background effect, they are the cornerstone of modern web design. Furthermore, websites are supposed to zoom or to be, at least to some degree, liquid nowadays, which created a whole new range of issues for us web designers. Ems and pixels don't mix well together and vector images aren't that easy to use, so we are left with very little when a whole design is supposed to zoom with the contents.
where it falls short
Background images have taken us a long way but they too have their limitations. The faux columns technique for example is pretty cool but useless if you have a liquid left column. Sprites are very interesting too but where do you hide the other images in a flexible, liquid, elastic layout system. Most of these shortcomings are related to the background-position property in css which is pretty limited to work with.
Currently it is only possible to position a css background from the top left corner. You can position your backgrounds to the right and bottom too, but only by using keywords or percentages. It is in fact impossible to position a background 10em from the right side of your container. Or 10px outside the bottom side of your container.
This puts a huge limitation on the way we can use our background images and most developers will have run into this limitation at one time or another, wondering why they built in that limitation (or why they didn't foresee the flexibility we need today).
css3 to the rescue
.class {background-position:right 10px bottom 15px;} Luckily for us they acknowledged the problem when they started development on css3 and while I believe syntax is still being discussed it will be possible in the (far far) future to position css backgrounds from all sides, making it possible to use the faux columns with liquid left columns (of course, the technique will most probably be outdated by that time) and sprites in all different circumstances.
More information on the css3 background-position property can be found on the w3c website.
coming up
So that's the main limitation when it comes to css background images. My next article will focus on css sprites, what they are and why the limitations of the background position play a large part in the flexibility of using css sprites. Stay tuned.