Fandom

HTML & CSS Wiki

Background-position

649pages on
this wiki
Add New Page
Comments0 Share

The background-position property is used in CSS and certain HTML elements. It sets the initial position of any background image that has been set.


Values

One or two of the values are accepted. Negative <percentage> and <length> values are also accepted. If only one value is specified, the second value is rendered as center. The first value represents the horizontal position and the second represents the vertical position (if at least one value is not a keyword).

  • <percentage> - With a pair value of 0% 0%, which is equal to 0 0, the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A pair value of 100% 100% places the lower right corner of the image in the lower right corner of the padding area. With a pair value of 14% 84%, the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
  • <length> - With a pair value of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
  • top - Same as 0% for the vertical position.
  • right - Same as 100% for the horizontal position.
  • bottom - Same as 100% for the vertical position.
  • left - Same as 0% for the horizontal position.
  • center - Same as 50% for the horizontal position if not otherwise specified, or 50% if it is.


HTML example:

<body style="background-image:url('Wiki.png'); background-position:center 10%;">
Body content.
</body>


CSS example:

body {
      background-image:url('Wiki.png');
      background-position:center 10%;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.