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

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!