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

HTML background position example

Example - With repeat-x

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

Source Code

Result

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

HTML background position example

Centered & Repeating Horizontally

Source Code

Result

HTML background position example

Centered & Repeating Vertically

Source Code

Result

HTML background position example

Bottom, Right & No Repeating

Source Code

Result

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

HTML background position example

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

Source Code

Result

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.