BACKGROUND IMAGE

The background-color property is used to set the background color of an element.

The example below demonstrates, how to set the background color of a web page.

EXAMPLE

BODY {
    background-image: URL("LEAF.jpg");
}

Background Repeat

By default the background-image property repeats an image both horizontally and vertically.

By using background-repeat property you can control how a background image is tiled in the background of an html element. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.

See the example below which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally.

EXAMPLE

BODY {
    background-image: URL("GRADIENT.png");
    BACKGROUND-repeat: repeat-x;
}

Background Attachment

The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.

EXAMPLE

BODY {
    width: 250px;
    height: 200PX;
    overflow: SCROLL;
    background-image: URL("RECYCLE.jpg");
    background-attachment: fixed;
}

Background Position

The background-position property is used to control the position of the background image.

If no background-position has been specified, the image is placed at the default top-left position of the element i.e. at (0,0). See the example below:

EXAMPLE

BODY {
    background-image: URL("TREE.png");
    background-repeat: no-repeat;
}

In the following example, the background image is positioned at top-right corner and the position of the image is specified by the background-position property.

EXAMPLE

BODY {
    background-image: URL("TREE.png");
    background-repeat: no-repeat;
    background-position: 100% top;
}

The Background Shorthand Property

As you can see from the examples above, there are many properties to consider when dealing with the backgrounds. It is also possible to specify all these properties in one single property, to shorten the code. This is called a shorthand property.

The background property is a shorthand property for setting all the individual background properties (i.e., background-color, background-image, background-repeat, background-attachment and background-position) at once. For example:

BODY {
    background-color: #f0e68c;
    background-image: URL("SMILEY.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

Using the shorthand notation the above example can be written as:

EXAMPLE

body{
    background: #f0e68c URL("SMILEY.png") no-repeat fixed 250px 25px;
}

When using the background shorthand property the order of the property values should be.

background: color image repeat attachment position;

If the value for an individual background property is missing or not specified while using the shorthand notation, the default value for that property will be used instead, if any.

Categories: CSS