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

From CDOT Wiki
Jump to: navigation, search
(→‎Summary)
(→‎Usage Examples)
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
span style="margin:0;background:#ffff33;font-size:120%;font-weight:bold;border:1px solid #a3b0bf;text-align:left;color:#000;padding:0.2em 0.4em;">This document is a work in progress and is subject to change.</span><br /><br />
 
 
== Summary ==
 
== Summary ==
−
Establish the location of the left (x) or top (y) edges of the background image specified with the background-image attribute.
+
Establish the location of the left (x) with the background-image attribute.
−
This tag allows the user to specify the percentage of the block-level element's box width or height (respectively) at which the image (or repeated images) begins. Instead of percentages, you can specify length values (in the unit of measure that best suits the medium). In lieu of the numerical values, you may use one axis-specific constant value per attribute.
 
 
<br>
 
<br>
 
<br>
 
<br>
Line 11: Line 9:
  
 
== Syntax ==
 
== Syntax ==
−
border-style: value optionalvalue2 optionalvalue3 optionalvalue4
+
background-position-x: [percentage | length] | [left | center | right ]
  
 
== Legal Values ==
 
== Legal Values ==
Line 20: Line 18:
 
<th>Value</th>
 
<th>Value</th>
 
<th>Description</th>
 
<th>Description</th>
 +
</tr>
 +
 +
<tr>
 +
<td>percentage</td>
 +
<td>percentage of the block level element</td>
 +
</tr>
 +
 +
<tr>
 +
<td>length</td>
 +
<td>length values (in the unit of measure that best suits the medium</td>
 +
</tr>
 +
 +
 +
<tr>
 +
<td>left</td>
 +
<td>aligns object to the left on the x - axis</td>
 +
</tr>
 +
 +
<tr>
 +
<td>centre</td>
 +
<td>aligns object to the centre on the x - axis</td>
 +
</tr>
 +
 +
<tr>
 +
<td>right</td>
 +
<td>aligns object to the right on the x - axis</td>
 
</tr>
 
</tr>
  
Line 28: Line 52:
 
== Usage Examples ==
 
== Usage Examples ==
  
−
<pre>p{border-style: dotted}</pre>
+
Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
−
All four borders will be dotted.
+
background-repeat: repeat-y;
−
<pre>p{border-style: dotted dashed}</pre>
+
background-position-x: center }
  
 
== Notes ==
 
== Notes ==
  
 +
 +
This tag applies to Applies to  block-level and replaced elements.
  
 
== Specification Conformance  ==
 
== Specification Conformance  ==
−
CSS1 Conformance:
 
  
 
== Browser Compatibility ==
 
== Browser Compatibility ==
−
 
+
Works on all browsers.
−
Browser Compatibility: IE 4+ / NN 4+
 
  
 
== See Also ==
 
== See Also ==
−
 
+
[http://www.yasininat.com/ref/index.php?ref=css&p=background-position-x Border Style CSS Background Position X]
−
[http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_BORDER_STYLE&action=edit&section=9 Border Style Cascade Style Sheets Properties]
 
−
<br>
 

Latest revision as of 14:11, 13 December 2006

Summary

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

Inherited: No
Initial Value 0%

Syntax

background-position-x: [percentage | length] | [left | center | right ]

Legal Values

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

Mozilla Recommended Values

Usage Examples

Ext/Doc: body { background-image: url(http://www.foo.com/image.gif);
background-repeat: repeat-y;
background-position-x: 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 X

Retrieved from "https://wiki.cdot.senecapolytechnic.ca/w/index.php?title=CSS_GUIDE_BACKGROUND-POSITION-X&oldid=8428"