Share via:

Background-position - CSS Property

The background-position property can be used to control the position of backgrounds inside HTML elements.


Edited: 2016-10-18 12:36

Beamtic article image

The CSS background-position property controls the position of a background-image.

By carefully controlling the position of background images, it is possible to have multiple images in one container file. Individual images can be picked by positioning the background so that only the desired image is visible in an element. See also: Image sprites

Generally, you can use CSS backgrounds when the image is not part of the content on a page. If the image is a part of the content, or if you want it to also appear when an article is printed, you may want to consider including the image using the img element instead.

To optimize parts of a website, you can use data URIs in combination with CSS sprites for smaller icons and graphics which are a part of your site design.

Possible Values

  1. Length unit
  2. Keywords

The keywords are:

  1. top
  2. right
  3. bottom
  4. left


In the following example we are first setting the background-image for body, then the background-repeat, and finally we try to control the position of the image.

body {
  background-image: url("MyImage.png");
  background-repeat: no-repeat;
  background-position: 24px 48px;

In the above example the image is placed 24px from the top of its element, and 45px from the left side of its element.

Inherited? - NO!