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 CodeResult
HTML background position example

Example - With repeat-x

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

Source CodeResult
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 CodeResult
HTML background position example

Centered & Repeating Horizontally

Source CodeResult
HTML background position example

Centered & Repeating Vertically

Source CodeResult
HTML background position example

Bottom, Right & No Repeating

Source CodeResult
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 CodeResult
HTML background position example

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

Source CodeResult
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 CodeResult
HTML background position example

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

Source CodeResult
HTML background position example
Loading