Learning Style Sheet Properties

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:

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]