Css offers web developers a new way to control the display of the background image in a given layer. With plain HTML, the background image is always tiled both horizontally and vertically in the containing area. The usual trick to avoid the tiling was then to create a background graphic with the same dimensions as the area it’s placed.
That way, the background image will be displayed once. Even with that trick you cannot really control the positioning without going through a graphic program to put additional spacing that will blend with the background color.
Now thanks to CSS one can define the web designer can specify whether or not she want the background image to be tiled horizontally (repeat-x), vertically (repeat-y) or both (repeat).
That’s not all. You can now ask the web browser not to tile the background image at all with no-repeat . As a web designer you can even specify where you would like the place the background image by specifying its coordinates x and y:
#containerbox {
background: url(images/bgimage.jpg) no-repeat 20px 15px;
}
That CSS rule will place the background image (bgimage.jpg) inside the containing layer (containerbox) at the horizontal coordinate x equals to 20 pixels (from the top left corner of the container box) and 15 pixels vertically away from that top left edge.
What is now missing however is the ability to now define where (x, y) one would like the background image to start tiling, how many time should it tile then stops.
That would be really cool, sweet, neat and powerful !!
Until then, we both have to hang on to what we have and get the most of it by using tricks to achieve the effects we want.