Learning Style Sheet Properties - Alphabetical Property Reference through Behavior
(Page 3 of 4 )
background-position
IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: No
Establishes the location of the left and top edges of the background image specified with the background-image property.
CSS Syntax
background-position: [percentage | length] {1,2} |
[top | center | bottom] || [left | center | right]
Value
You can specify one or two percentages, which are the percentages of the block-level element’s box width and height (respectively) at which the image (or repeated images) begins. If you supply only one percentage value, it applies to the horizontal measure, and the vertical measure is automatically set to 50%. Instead of percentages, you can specify length values (in the unit of measure that best suits the medium). You can also mix a percentage with a length. In lieu of the numerical values, you can create combinations of values with the two sets of constant values. Select one from each collection, as in top left, top right ,or bottom center . Whenever you specify two values, they must be separated by a space.
Initial Value 0% 0%
Example
div.marked {background-image: url(watermark.jpg);
background-position: center top}
Applies To Block-level and replaced elements.
Object Model Reference
[window.]document.getElementById("elementID ").style.backgroundPosition
background-position-x, background-position-y
IE 4 NN n/a Moz n/a Saf 1.3/2 Op n/a CSS n/a
Inherited: No
Establish the location of the left (x) or top (y) edges of the background image specified with the background-image property.
CSS Syntax
background-position-x: [percentage | length] | [left | center | right ]
background-position-y: [percentage | length] | [top | center | bottom]
Value
You can 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 property.
background-repeat
Initial Value 0%
Example
div.marked {background-image: url(watermark.jpg);
background-position-x: center}
Applies To Block-level and replaced elements.
Object Model Reference
[window.]document.getElementById("elementID ").style.backgroundPositionX
[window.]document.getElementById("elementID ").style.backgroundPositionY
background-repeat
IE 4 NN n/a Moz all Saf all Op all CSS 1
Inherited: No
Sets whether a background image (specified with the background-image property) should repeat and, if so, along which axis. You can use repeating background images to create horizontal and vertical bands.
CSS Syntax
background-repeat: no-repeat | repeat | repeat-x | repeat-y
Value
With a setting of no-repeat, one instance of the image appears in the location within the element established by the background-position property (default is the top-left corner). Normal repeats are performed along both axes, but you can have the image repeat down a single column ( repeat-y ) or across a single row ( repeat-x ).
Initial Value repeat
Example
body {background-image: url(icon.gif); background-repeat: repeat-y}
Applies To All elements.
Object Model Reference
[window.]document.getElementById("elementID ").style.backgroundRepeat
behavior
IE 5(Win) NN n/a Moz n/a Saf n/a Op n/a CSS n/a
Inherited: No
Associates an external behavior definition to the element.
CSS Syntax
behavior: uri[, uri[, ...]]
Value
CSS-formatted URL value, with the actual URL pointing to an external .htc file, ID of an object element that loads a behavior ActiveX control into the page, or one of the built-in default behaviors (in the format url(#default#behaviorName) ). Default behavior names are:
| anchorClick | anim | clientCaps | download |
| homePage | httpFolder | mediaBar | saveFavorite |
| saveHistory | saveSnapshot | userData |
For details on what these default behaviors do and under what security conditions you can use them, visit http://msdn.microsoft.com/workshop/author/behaviors/ reference/reference.asp.
Initial Value None.
Example input.numOnly {behavior: url(numInput.htc) }
Applies To All elements .
Object Model Reference
[window.]document.getElementById("elementID ").style.behavior
[window.]document.getElementById("elementID ").behaviorUrns[i]
Next: Alphabetical Property Reference: Border >>
More DHTML Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Check it out today at your favorite bookstore. Buy this book now.
|
|
