CSS background position: 3 examples with bg image property

The background-position property of CSS

The background-position property works with the background-image property of CSS. The background-position property is used to set the image starting position in the background. Besides it may also specify margins from the top, bottom etc.

See an example of background position

Syntax of CSS background position

Following is the syntax of using the background position property with its possible values:

background-position: value;

where the values can be:

  • left
  • right
  • left center
  • left top
  • left bottom
  • right top
  • right bottom
  • center top
  • center bottom

etc. Note, if you specify only one value, like the left, right then the other value default would be center.

Apart from specifying left, right, top, bottom combinations, the values of CSS background-position can be specified in percentage (%) and pixels as well.

The background-position CSS property value in percentage:

background-position: 20% 80%;

where the first value, 20% is for horizontal and the other value (80%) is vertical.

For Pixels

background-position: 20px 80px;

Where the first value specifies horizontal and the second is vertical.

Note that, you must set the CSS background-attachment property as fixed for this to work in Firefox and Opera.

Example of setting CSS background image position

In this example, we will set background position of the image with right top combination by using the background position property. See the example by clicking the link below:

Experience this example online

Background position example with center, center combination

Experience this example online

An example with horizontal and vertical values in pixels

This example will use horizontal and vertical values in pixels specified in the background-position property.

Experience this example online


Also see – CSS background

Was this article helpful?

Related Articles

Leave A Comment?