CSS Shorthand at a Glance - Background shorthand property

(Page 4 of 8 )

In order to implement the "background" shorthand property, the syntax is:

background: background-color | background-image | background-repeat | background-attachment | background-position;

As its name suggests, the "background-color" property sets the background color of the selected element. It may be set to any HTML color code or name, or transparent.

The  "background-image" property sets the background image for the selected element. It may be set to a URL or "none."

Possible values for the "background-repeat" property are: "repeat-x" (background image is tiled horizontally), "repeat-y" (background image is tiled vertically), "repeat " (both ways), and "no-repeat" (not tiled at all).

Regarding the "background-attachment” property, it sets whether the background image of the selected element scrolls with it or remains fixed while the element’s contents scroll over it. This property can be set to "fixed" or "scroll."

Finally, the values for "background-position" allow us to specify the position of the top-left corner of the background image. We can specify one or two percentages, lengths or positions, where the first specifies the horizontal position and the second specifies the vertical position. If the vertical position is not specified, it’s taken to be 50%.

Once again, let’s code a couple of examples:

background: #00f url("bg.gif") repeat-x center left;

background: #fff url("bg.gif") no-repeat fixed center center;

Here we’ve specified a blue background, and a background image that will be tiled horizontally (across the X axis), horizontally positioned at the center and vertically positioned at the left of the element.

In the second example, we’ve assigned a white background, using a background image that won’t be tiled at all. The background image will be horizontally and vertically positioned at the center of the element. The "fixed" property indicates that the image will remain fixed as the element’s contents scroll over it.

Now, it’s time to have a look at the next CSS shorthand property.

Next: Margin shorthand property >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: CSS Shorthand at a Glance

·  Here's a tight reference about the most common CSS shorthand properties,...    · I always thought this stuff was common sense...Guess I took it for granted... I...    ·  I agree with you about writing clean CSS code. That's the right way to...    · The correct explanation for three shorthand values is:"If there are three...    · Yes, that's correct. Thanks for pointing out that small error.   >>> Post your comment now!