Background Position

This page contains HTML background position code. This code enables you to specify the position of your background image within your HTML documents.

You can add a background image to your HTML document by using the background-image property or the background property. While doing this, you also have the opportunity to set the background position, either using the background-position property, or by specifying its position within the background property - which allows you to specify multiple background properties in one go.

The `background-position` Property

In this example, we use the background-position property to specify where the background image appears within the outer container.

Example - With `no-repeat`

This example uses the background-repeat:no-repeat so that the image only appears once and doesn't repeat or tile if the outer container is bigger than the image.

Source Code	Result
<div style="background-color:white;background-image:url(/images/backgrounds/background-image-3.gif);background-repeat:no-repeat;background-position:bottom right;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Example - With `repeat-x`

In this example, the background image repeats horizontally across the <div> element.

Source Code	Result
<div style="background-color:white;background-image:url(/images/backgrounds/background-image-2.gif);background-repeat:repeat-x;background-position:center;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

The `background` Property

As mentioned, the CSS background property allows you to add all your background related properties all in one go.

This is a more efficient way to code your background image properties.

Here are various examples of using the background property to specify the background position.

Centered & No Repeating

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white center no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Centered & Repeating Horizontally

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white center repeat-x scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Centered & Repeating Vertically

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white center repeat-y scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Bottom, Right & No Repeating

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white bottom right no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Using a Percentage Value

You can use a percentage value instead of just "center" or "top right" etc. Using a percentage value gives you more control over exactly where the image should appear.

Example - 70% 70% (70 percent in from the left and 70 percent down from the top):

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white 70% 70% no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Example - 30% 70% (30 percent in from the left, 70 percent down from the top):

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white 30% 70% no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Using a Length Value

You can also use a length value - which can provide you with even more control over where the image appears.

Example - 30px 30px (30 pixels from the left, 30 pixels from the top):

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white 30px 30px no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example

Example - 80px 190px (80 pixels from the left, 190 pixels from the top):

Source Code	Result
<div style="background:url(/images/backgrounds/background-image-2.gif) white 80px 190px no-repeat scroll;border:1px solid black;width:300px;height:300px;font-size:18px;">HTML background position example</div>	HTML background position example