Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

background-position-y property

Specifies the y-coordinate of the background-position property.

Syntax

background-position-y: <length> | <percentage> | top | center | bottom

Property values

length

Floating-point number, followed by a supported length unit.

percentage

Integer, followed by a percent sign (%). The value is a percentage of the height of the object.

top

Vertical alignment is at the top.

center

Vertical alignment is centered.

bottom

Vertical alignment is at the bottom.

CSS information

Applies ToAll elements
Mediavisual
Inheritedno
Initial Value0%

Standards information

There are no standards that apply here.

Examples

The following example shows the result of different background-position-y settings for each of the three div objects. The first div object sets background-position-y to 90%. This represents a vertical offset of 90% relative to the width of the background positioning area. The second div object sets background-position-y to 20 pixels and sets the vertical offset on the x-coordinate to 20 pixels. The third div object sets background-position-y to center. This is equivalent to a vertical offset of 50%.

Three div objects demonstrate different settings for the background-position-y property.


<body>
   <div class="circle"></div>
   <div class="square"></div>
   <div class="triangle"></div>
</body>



div {
   width: 70px;
   height: 200px;
   background-color: #D3D3D3;
}
.circle {
   background-image:url(circle.png);
   background-repeat: no-repeat;
   background-position-y: 90%;
}
.square {
   background-image:url(square.png);
   background-repeat: no-repeat;
   background-position-y: 20px;
}
.triangle {
   background-image:url(triangle.png);
   background-repeat: no-repeat;
   background-position-y: center;
}


See also

CSSStyleDeclaration
currentStyle
defaults
runtimeStyle
style
background-position-x
background-position

 

 

Show:
© 2014 Microsoft