CSS Tutorial - The background-position Property

Everybody who has done any major website coding loves the CSS background-Image property. Besides doing plain old background images quite well, it has been used and abused in dozens of ways to get nice flicker free rollover images But while we will be using the background-Image property today, it will not be our main focus - instead we will be taking a look at the background-position property. Read on to learn about what this property is, and how it can be extremely useful when writing a website (and we show you yet another way to do rollover images).


So what does this background-position property do? Well, when used in conjunction with background-Image, you can actually offset the background image in both the x and the y direction. So say you have a 10x10 pixel div with a 20x20 pixel background image. By default, the upper left of that 20x20 image would be displayed (the 10x10 square on the upper left). But maybe you actually wanted to display the content of the lower right of the image. Well all you would have to do is do the following in your style tag:

background-position: -10px -10px;

What that property will do is shift your image 10 to the left and 10 to the top. Below are some examples of what I am talking about:

So the large square above is the full image that we are using. It is just a 100x100 pixel image where each quadrant is a different color. The two rows of squares below that image are each separate divs with the full image set as the background, but with different background-position values set. On the first row of 4, the green square has the value "0px 0px", which is the default value for that property. The next square, the red one, has the value "-50px 0px". This tells the browser to shift the image left by 50 pixels. In this particular case, you could also use the value "50px 0px" and get the same effect - this would shift the image right by 50 pixels - and since by default the browser will wrap the image, you would end up with the 'right' of the image on the left. I tend to like working with the negative position values better, that way you don't have to worry quite as much about the image wrapping.

The next square, the blue one, the image is shifted up by 50px (background-position:0px -50px). And finally on that row we have the yellow square, which is both shifted up by 50px and shifted left by 50px (background-position:-50px -50px).

The last row of squares shows more of what happens with the image wrapping. With the first square, the image is shifted down and to the right by 25 pixels ("25px 25px" or "-75px -75px"). With the wrapping this causes the right of the image to show up on the left, and the bottom of the image to show up on top. Then we have a square showing "-25px -75px, which ends up just flipping the top and bottom, while shifting the image left. The third square flips the left and right while shifting the image up, with the position of "-75px -25px". The final square shows the dead center of the image, using the coordinates "-25px -25px".

Ok, hopefully that didn't hurt your head too much. You might what to get an image of your own, and play around with the property, so you get a better sense for how image wrapping affects all of this. Of course, you can turn off image wrapping using the css property background-repeat and its associated options, but where would the fun be in that?

So why is this useful at all? Well, there are two main uses that I have found for manipulating background image position. The first is actually pretty widely used already - and that is to make the perfect rollover button. This property, combined with the css "hover" pseudo-element, makes setting up rollover images very easy. Below is an extremely simple example:

As you can see, when you mouse over that green square, it turns to yellow. The code to do this is quite short - short enough, in fact, that here it all is:

a.myLink
{
background-Image:url('my_best_image.jpg');
display:block;
width: 50px;
height: 50px;
}
a.myLink:hover
{
background-position: -50px -50px;
}

<-a class="myLink"-><-/a->

All we do here is create a style class for links, where we give it a background image and a size. We also need to set the display property to block to make the link actually take the given size (instead of sizing to the contained content). One thing to remember - since we don't have the background-position set, it is set to "0px 0px". The magic happens in the a.myLink:hover section - because, now when the mouse is over a link which has the "myLink" style, the background-position gets changed. And when the mouse leaves, it gets changed back.

There are a couple benefits to using this technique. For one, there is no javascript needed. And more importantly, there is never any image flicker as the browser tries to load a second image. Ever. There is only one image, and so if it is displayed at all, it means the image data is there for both the hover and non-hover cases.

Ok, so that is all well and good - but the technique I just covered is actually pretty well known. But there is a second, less talked about, reason that the background-position property is so useful. It can help you cut down on the number of images on a website. Think about it - a lot of websites have a least a dozen (and often many more) tiny images. Need a rounded corner? Thats another image. A nice looking tab? Another image. And so on and so forth.

Each additional image means another round trip from client to server. It means more bandwidth wasted on image headers (which can be a significant percentage of the total size of a small image). It means another blank spot on your web page as a user waits for it to load. But by using the background-position property, you can cut down on all that! You can put all your icons, all your corners, all your tabs, etc.. into a single image. For instance, take a look at the following image:


This image is what we use on GamingTextures as our main background and icon image file. Almost every single icon and background image on the site is in this one file - 34 in total. The combined image is only 6.3KB (and only takes one request from the client to get). When we were using separate images for everything, the total came to almost 20KB, and there were 34 image requests that the client had to send. The only annoying thing about a scheme like this is that you need to have pixel positions for each individual image. For instance, if I want to display the closed folder icon, I need to know that it is at position "-84px -30px":

style=
"background-Image:url('
/files/Tutorials/CSS/Background_Position/combined_100x283.gif'
);background-position:-84px -30px;width:16px;height:14px">

Other than having to know those values (or open up an image editing program and finding them) using an image like this works wonderfully. And besides cutting down on bandwidth and load time, I find it also helps with the appearance of a site. This is because if all the images and icons are in one image, then they are either all being displayed or none of them are. When the image loads, every single element that references it on the page shows up instantaneously, all at the same time.

One thing that you do have to watch out for is repeating images. You can't put a repeater in an image like the one above - because when the image repeats, the whole image will wrap. One thing you can do is put all your vertical repeaters in one image, and all your horizontal repeaters in another. If you have something that needs to repeat both vertically and and horizontally, it sadly needs to be in its own image file. Below we have an example of sticking a couple vertical repeaters in a single image:

And there you go! Have fun combining all your images together, and if you have any questions or comments about advantages/disadvantages to this technique, please leave your thoughts below.