Positioning Your Background Image Using CSS

CSS affords the webmaster many options for positioning their background image. We can align the image to different horizontal and vertical images with just a few simple commands in our style sheet.

One important thing to keep in mind when positioning a background image is whether or not you've got your image set to repeat, or tile, along the background. One centered background image will look a lot different than a repeating centered background image.

Let's take a look at a simple CSS background position style settings.

p	{background-image:gif.jpg;

	background-repeat:norepeat;

	background-position:center;}

The style setting shown above would simply center an image behind our paragraphs. The image would not be repeated. Of course, CSS allows us to get much more detailed in our style settings.

Three style attributes left, center, and right control the position of our element across the horizontal plane. For example, we would enter background-position:left to align our background image to the left edge of our paragraphs.

Three other style attributes top, center, and bottom control the positioning our our element across the vertical plane. For example, we would enter background-position:bottom to align our background image to the bottom edge of our paragraphs.

The vertical and horizontal style attributes can be combined to further fine-tune our background image positioning. For example, if we wanted to align our background image to the lower right corner of our paragraphs we could enter the following style background-position:bottom right. Combining a horizontal and vertical attribute to background positioning requires placing a single space after the first attribute and before the second. The order of the attibutes does not matter. background-position:top left is the same as background-position:left top.

As with using fixed name attributes to position our image along the horizontal and vertical plane of our element, we can also use percentages. For example, background-position:center center could be expressed in percentages as background-position: 50% 50%. This might seem complicated, but think of it this way. If you'd like to position your background image one third of the way across your screen horizontally and halfway down the element vertically you could express this as background-position:50% 33%. Percentages allow more exact placement than the few fixed word positions. Bear in mind that vertical positions are always entered first with percentages, followed by the horizontal position.

Finally, you may use a length measurement for your positioning. This would look something like background-position: 80px 5 px. Such measurements are not recommended as computer monitors and the way browsers read these measurements are not standard. If you choose to use these measurements remember, they are written as offsets from the top left margin. That means setting the value to background-position: 80px 10px would indent your background image 80px from the top of your paragraphs and 10px from the left margin.

Any of the background position specifications can be combined. You may specify background-position:center 12% or background-position:87% 25px. When combining attributes remember that the vertical attribute should come first.

You should now be able to use CSS to align your background image using fixed named positioning, percentages, and length measurements, or any combination thereof.