How to Use the Background Position Property in CSS

The purpose of the background-position property is to set the position of a background image. This article will explain the various values that apply to the background-position property.

Difficulty:

Moderately Easy

Instructions

Things You'll Need

• A text editor or an HTML editor

1. If no background-position is named, the default position is at the top-left position of the element.

2. A value can be assigned to this property as either a length, a percentage or using specific keywords.

3. A length value places the background image at the exact horizontal and vertical position named. A single length value, for example:

   #example {
   background-position: 200px;
   }

   represents both a horizontal position 200px from the left and a vertical position 200px from the top.

4. Two values, represent the horizontal and vertical, for example:

   #example {
   background-position: 100px 200px;
   }

5. Position can be given using the following keywords for horizontal positions: left, center, right. For vertical positions, these keywords are allowed: top, center, bottom. For example:

   #example {
   background-position: left center;
   }

6. Percentage values place an image at a position related to both the element being given a background-image and the actual image itself. For example:

   #example {
   background-position: 30% 50%;
   }

   places the image at 30% of the image's width and 50% of the image's height at a position 30% from the left and 50% from the top of the containing element.

7. Certain percentage values match keywords:
   0% = left or top
   50% = center
   100% = right or bottom
   For example background-position: left top;
   is the same as background-position: 0% 0%;

8. Negative length and percentage values are allowed. This can move the position of some or all of the background-image outside the boundaries of the containing element. The part outside the boundaries of the containing element would not be visible. On a user-created change, perhaps hovering over a link, the hidden part of the background image can be revealed by changing the background-position of the background-image.