Difference between revisions of "CSS GUIDE BACKGROUND-POSITION-Y"

From CDOT Wiki
Jump to: navigation, search
(Syntax)
(See Also)
 
(3 intermediate revisions by the same user not shown)
Line 32: Line 32:
  
 
<tr>
 
<tr>
<td>left</td>
+
<td>top</td>
<td>aligns object to the left on the x - axis</td>
+
<td>aligns object to the top on the y - axis</td>
 
</tr>
 
</tr>
  
 
<tr>
 
<tr>
 
<td>centre</td>
 
<td>centre</td>
<td>aligns object to the centre on the x - axis</td>
+
<td>aligns object to the centre on the y - axis</td>
 
</tr>
 
</tr>
  
 
<tr>
 
<tr>
<td>right</td>
+
<td>bottom</td>
<td>aligns object to the right on the x - axis</td>
+
<td>aligns object to the bottom on the y - axis</td>
 
</tr>
 
</tr>
  
Line 52: Line 52:
 
== Usage Examples ==
 
== Usage Examples ==
  
  div.marked {background-image: url(watermark.jpg);
+
   
  
 
  Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
 
  Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
 
  background-repeat: repeat-y;
 
  background-repeat: repeat-y;
  background-position-x: center }
+
  background-position-y: center }
  
 
== Notes ==
 
== Notes ==
Line 69: Line 69:
  
 
== See Also ==
 
== See Also ==
[http://www.yasininat.com/ref/index.php?ref=css&p=background-position-x Border Style CSS Background Position X]
+
[http://www.yasininat.com/ref/index.php?ref=css&p=background-position-y Border Style CSS Background Position Y]
 
<br>
 
<br>
[http://www.blooberry.com/indexdot/css/properties/colorbg/bgpositx.htm Backgound-Position Y Cascading Style Sheets Property]
+
[http://www.blooberry.com/indexdot/css/properties/colorbg/bgposity.htm Backgound-Position Y Cascading Style Sheets Property]

Latest revision as of 15:15, 13 December 2006

Summary

Establish the location of the left (y) with the background-image attribute.

Inherited: No
Initial Value 0%

Syntax

background-position-y: [percentage | length] | [top | center | bottom]

Legal Values

Value Description
percentage percentage of the block level element
length length values (in the unit of measure that best suits the medium
top aligns object to the top on the y - axis
centre aligns object to the centre on the y - axis
bottom aligns object to the bottom on the y - axis

Mozilla Recommended Values

Usage Examples

Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
background-repeat: repeat-y;
background-position-y: center }

Notes

This tag applies to Applies to block-level and replaced elements.

Specification Conformance

Browser Compatibility

Works on all browsers.

See Also

Border Style CSS Background Position Y
Backgound-Position Y Cascading Style Sheets Property