Background-position - CSS Property

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

753 views

Edited: 2016-10-18 12:36

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.

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