Sometimes it is rather difficult to imagine what happens when you are positioning an image in the background. Once I've got the association of a port-hole window, I'll never forget.

Theory

If you have a box in which you want to place a background-image, you can imagine you are looking though a port-hole.
That parts of the image that don't fit into the box (the port-hole window), you simply don't see.
If we have a no-repeating image of a seascape, and a box as great as the port-hole, we see only the background in the inner side of the port-hole:

fig. 1

• In fact, the view port of a box is a rectangular thing, but for this example it doesn't matter.

The basic css for this background is:

 

After a while our boat with the port-hole will have sailed a bit farther. With the use of the same image now we want to see this:

fig. 2

Happily, it's possible to position the background-image with the property ... 'background-position'. That means, we can add some distance to the x-y coordinates of the background-image. By default, the x-y coordinates are 0,0:

fig. 3

Or: the upper left corner of the box and the upper left of the background-image are just at the same position. Therefore the used css for fig. 1 could also have been:

The background-position can be notated in discrete distances as in px, as well as in relative distances: in a % of the box-width or -height. To get the position of fig. 2, we simply put:

 

Once we know this, we can do almost everything with our background!

To see the boat at the right side:

fig. 4

we take:

 

When the sea is a bit rough, sometimes we see:

fig. 5

Then we have to lift the background-image about 33px upwards:

That's all - now let the fantasy do the rest!

Shorthand

To make your stylesheet some shorter, you can use the shorthand notation:

Conclusions

With background-positioning you can use different parts of one image.

It is not limited to 1 image: you also can combine totally different images in one image: with the background-positioning the consisting parts can be separately displayed. In this way you can combine small images in order to speed up the download of your page.

As illustrated in one of the examples below, a "double image" is easy for making of a css-hover.

Hmm, I promised myself not to talk about tables (often ruining the html), but o.k.: all this is also usable in backgrounds for tables.

When you use not only the background-positioning, but in the meantime a positioning of two or more boxes with parts of the same image, you can make corners and borders for liquid (self-adapting) boxes. See article: Liquid Round Corners.

Examples

When we use a port-hole image with a transparent center on the foreground, like this,

fig. 6

then the result of implementing:

is:

no combined illustration:

transparent foreground image and
live background !

How that?

What happened, was that as well the image as the background-image were starting at the point 0,0 of the box:

fig. 7

To see the boat, we move the background 25px to the right:

and that is just what we mean:

 fig. 8

live background:

 

 

We also can take the same seascape-image as a background for different text-boxes:

 

 

 

 

With use of Peter Stanicek's fast css-rollovers technique we can make a rollover button of our image:

At Hover

Simple, no javascript needed and cross-browser!

 

And with a bit of javascript added (see source code), you can panoramize and/or move up & down the background-image: a kind of "animated gif", but then much smaller in kB's:

Some links

 

Enjoy the beauty of css!

23 oct. 2005