Css background: css property for the element’s background

Saturday 24 January 09 by Onsitus in CSS Properties

The css property background allows to personalize the background of a selected element with a color (background-color) or an image (background-image).

This image can be then duplicated or not (background-repeat), positioned (background-position) and be scrollable or not with the page body (background-attachment).

1. background-image

The css property background-image allows to add a background image in format jpg, gif, png…

background-image: url();

With the value url(), we specify the url to the image used as background for the element.
By default, the image is duplicated horizontally and vertically to fill up all the available space in the element.

Example:

background-image: url(star.jpg);

background-image: none;

The value none is the value by default, no image is imposted as background.

2. background-repeat

The css property background-repeat allows to duplicate or not the background image horizontally and vertically.

background-repeat: repeat;

The value repeat is the default value. The image is duplicated horizontally and vertically.

Example:

background-image: url(star.jpg);
background-repeat: repeat;
or in short…
background: url(star.jpg) repeat;

NB: the same result as by default without specifying a value for the background-repeat.

background-repeat: repeat-x;

With the value repeat-x, the background image is only duplicated horizontally.

Example:

background-image: url(star.jpg);
background-repeat: repeat-x;
or in short…
background: url(star.jpg) repeat-x;

background-repeat: repeat-y;

With the value repeat-y, the background image is only duplicated vertically.

Example:

background-image: url(star.jpg);
background-repeat: repeat-y;
or in short…
background: url(star.jpg) repeat-y;

background-repeat: no-repeat;

With the value no-repeat, the background image is not duplicated and a unique instance of the image is displayed.

By default, the image is positioned in the top left corner.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
or in short…
background: url(star.jpg) no-repeat;

3. background-position

The css property background-position allows to position the background image in relation to its element.
Its position can be specified in %, measure of unit (es:px) or specific key words.

background-position: X% Y%;

To specify the position of the background image is requested 2 values in percent (%) which represent the horizontal (x) and vertical (y) axes.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: 25% 75%;
or in short…
background: url(star.jpg) no-repeat 25% 75%;

NB: If only one value is given, the second one will automatically take the value of 50%.

background-position: Xpx Ypx;

This value has the same properties as the value in %. The only difference is that the measures are specified in pixel (px) or other measures of units supported by the css.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: 70px 20px;
or in short…
background: url(star.jpg) no-repeat 70px 20px;

NB: As before, if only one value is given, the second one will automatically take the value of 50%.

background-position: top left;

With the value top left, the background image is positioned in the top left corner of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top left;
or in short…
background: url(star.jpg) no-repeat top left;

NB: the same result as with background-repeat: no-repeat; without a value for the background-position.

background-position: top center;

With the value top center, the background image is positioned at the top and centered horizontally.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top center;
or in short…
background: url(star.jpg) no-repeat top center;

background-position: top right;

With the value top right, the background image is positioned in the top right corner of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: top right;
or in short…
background: url(star.jpg) no-repeat top right;

background-position: center left;

With the value center left, the background image is centered vertically and positioned on the left hand side of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center left;
or in short…
background: url(star.jpg) no-repeat center left;

background-position: center center;

With the value center center, the background image is centered horizontally and vertically.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center center;
or in short…
background: url(star.jpg) no-repeat center center;

background-position: center right;

With the value center right, the background image is centered vertically and positioned on the right hand side of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center right;
or in short…
background: url(star.jpg) no-repeat center right;

background-position: bottom left;

With the value bottom left, the background image is positioned in the bottom left corner of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom left;
or in short…
background: url(star.jpg) no-repeat bottom left;

background-position: bottom center;

With the value bottom center, the background image is positioned at the bottom of its element and centered horizontally.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom center;
or in short…
background: url(star.jpg) no-repeat bottom center;

background-position: bottom right;

With the value bottom right, the background image is positioned in the bottom right corner of its element.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: bottom right;
or in short…
background: url(star.jpg) no-repeat bottom right;

4. background-attachment

The css property background-attachment allows to specify if the background image is scrollable or not with the rest of the page body.

background-attachment: scroll;

By definition, with the value scroll, the background image is scrollable with the page body and not with its element. Instead, with Internet Explorer the background scroll with its own element.

This is the value by default.

Example:

background-image: url(star.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
or in short…
background: url(star.jpg) no-repeat center center scroll;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

background-attachment: fixed;

With the value fixed, the background image is fixed always in relation to the page body and is not scrollable.
NB: for other elements then body, this property only accepts values for url and fixed.

background-image: url(star.jpg);
background-attachment: fixed;
or in short…
background: url(star.jpg) fixed;

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.