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.
In this example, we use the
background-position property to specify where the background image appears within the outer container.
Example - With
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.
Example - With
In this example, the background image repeats horizontally across the
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
Centered & Repeating Horizontally
Centered & Repeating Vertically
Bottom, Right & No Repeating
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.
70% 70% (70 percent in from the left and 70 percent down from the top):
30% 70% (30 percent in from the left, 70 percent down from the top):
Using a Length Value
You can also use a length value - which can provide you with even more control over where the image appears.
30px 30px (30 pixels from the left, 30 pixels from the top):
80px 190px (80 pixels from the left, 190 pixels from the top):