Home arrow DHTML arrow Page 3 - Learning Style Sheet Properties
DHTML

Learning Style Sheet Properties


In this second part of a series on style sheet properties, you'll learn how to handle code for backgrounds, borders, and more. This article is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 06, 2007
TABLE OF CONTENTS:
  1. · Learning Style Sheet Properties
  2. · Alphabetical Property Reference
  3. · Alphabetical Property Reference through Behavior
  4. · Alphabetical Property Reference: Border

print this article
SEARCH DEVARTICLES

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]


blog comments powered by Disqus
DHTML ARTICLES

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials