css background position/unforseen limitations
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.
Comments
John Faulds
You probably won't need to use that feature of background-position; you'll be able to use multiple background images instead. ;)
Niels Matthijs
In relation to what problem, because if you want to use sprites you still need that background-position update very much to hide parts of the sprite beyond the visual area of your container.
And of course the idea of sprites is to lower the amount of images used :)
Perdele
I love this one for rounded corners box: background: url(cornettopleft.gif) top left no-repeat, url(cornettopright.jpg) top right no-repeat, url(cornetbottomleft.gif) bottom left no-repeat, url(cornetbottomright.gif) bottom right no-repeat;
Fabrics
What about border-image? border-image: url(yourimage.gif) 10 10 10 10 stretch stretch;
Fashion
CSS3??? Are you kidding? Most do not know CSS2! You can use background position with multiple html tags. I don't trust in CSS3, sorry.
hoài anh
Hey... in my dream fo css3 >>> background-position:right top left bottom left; ex: background-position: 10px 20px 20px 10px; or background-position:x y width-px height-px ex: background-position: 10px 20px width-100px height-100px;
myspace profile
Hi all, I am a regular reader of this blog. All the articles posted here as helped me a lot in improving as a web designer. All the posts here are really brilliant and helpful. I really liked your work and I too want to do like that. I always try to include all those tips and solutions provided in the articles of this blog. I will definitely use this one too. The description is also simple as it helped me to understand it easier. I will definitely suggest this article to my fellow colleagues too.