Fandom

HTML & CSS Wiki

Background-position-y

649pages on
this wiki
Add New Page
Comments0 Share

The CSS background-position-y property is used, if a background-image is specified, to specify the initial position on the Y-axis of the background image specified in the browser window if it is not continuously tiled in the element's rendering box. A minimum value for this property indicates the upper side of the rendering box, and a maximum value is at the lower side. The X-axis component of the background position can be specified using the background, background-position or background-position-x properties.

Values

Value Description
<percentage> Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on both the image and the canvas and may be negative (70% indicates the reference point 70% from the top side of the image is to be located at 70% from the top side of the element's rendering box).
<length> Represents an absolute Y-coordinate position for the image and may be negative. Examples are cm, pt, px, etc.
top Image is positioned to the top of the screen on the Y-axis.
center Image is centered in the screen on the Y-axis.
bottom Image is positioned to the bottom of the screen on the Y-axis.


HTML example:

<body style="background-image:url('http://www.foo.com/image.png');
background-repeat:repeat-x; background-position-y:bottom;">
TEXT
</body>


CSS example:

body {
      background-image:url("http://www.foo.com/image.png");
      background-repeat:repeat-x;
      background-position-y:bottom;
}

See Also

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.