The background properties of CSS are a little different than the shorthand we've seen for border, padding, margin, font. The 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration. The values fall as thus:
Value: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit
So this could be
background: #ccc url("/PATH/TO/bg.gif") no-repeat fixed top left;
Now the first several items are pretty straightforward, as I don't change them up much. Background-color, -image, -repeat and -attachment don't vary enough for me to really talk about. I'll talk about it, but not much.
background-color - use the shorthand version for color here. #c9f is the same as #cc99ff. #303 is the same as #330033. Got it? Okay.
background-image: the path to the image. url("/PATH/TO/IMAGE").
background-repeat. Okay, you have options here.repeat: The image is repeated both horizontally and vertically. repeat-x: The image is repeated horizontally only. repeat-y: The image is repeated vertically only. no-repeat: The image is not repeated: only one copy of the image is drawn.background-attachment: scroll or fixed.
If a background image is specified, this property specifies
whether it is fixed with regard to the viewport ('fixed') or scrolls along with the document ('scroll').
background-position. Okay. This is where it gets interesting. This can be names or values. The core idea is that these values specifies the initial position from the top left corner of the container. If you put in 20% 50%, that will start displaying the object 20% from the left, and 50% from the top. So much like your clock, and other shorthand idioms, the directions work the same here. LEFT, TOP.
If only one percentage or length value is given, it sets the horizontal position only, the vertical position will be 50%. If two values are given, the horizontal position comes first. Combinations of length and percentage values are allowed, (e.g., '50% 2cm'). Negative positions are allowed. Keywords cannot be combined with percentage values or length values (all possible combinations are given above).
Comments are Open (1)
Posted at 12:04 PM
Comments
martina
I like this site very much!
Posted by: martina | October 31, 2005 09:48 AM