Monday, September 13, 2010

CSS shorthand for web backgrounds

As when defining margins and padding, you can use shorthand for web background values,
bundling them into a single background property, although it’s worth stating that the
shorthand value overrides any previous settings in a CSS file for individual backgroundproperties. (For instance, if you use individual settings to define the background image,
and then subsequently use the shorthand for setting the color, the background image will
most likely not appear.)
When using shorthand, you can set the values in any order. Here’s an example:
body {
background: #ffffff url(background_image.gif) no-repeat fixed 50%
å 10px;
}
Generally speaking, it’s best to use shorthand over separate background properties—it’s
quicker to type and easier to manage. You also don’t have to explicitly define every one of
the values; if you don’t, the values revert to their defaults. Therefore, the following is
acceptable:
body {
background: #ffffff url(background_image.gif) no-repeat;
}
Because the background-attachment value hasn’t been specified, this background would
scroll with the page, and because the background-position value hasn’t been defined, the
background would be positioned at 0%, 0%—the top left of the browser window.

No comments:

Post a Comment