CSS background

Add a background image
Repeating a background image
Positioning the background image
Fixing a background image
background shorthand property
Multiple background images

CSS property background-* are used to create effects in the background of the page or elements.

A list of properties for styling the background, which will be discussed below:

background-color
background-image
background-repeat
background-position

Add a background image

The following rules add a background color and a background image to the <body> element. Then we set the white background color for the <div> element (with the wrapper class):

body {
  background-color: #333;
  background-image: url('image.png');
}
.wrapper {
  width: 80%;
  margin: 20px auto 40px auto;
  background-color: #fff;
  color: #333;
}

Try it »

The background-color property adds a background color to the page or to a specific element. In the example, we used background-color to set the background color for the <body> element and inside the <div> element. If the background color for the <div> element were not set, then the background that was set for <body> would be displayed as the background, because by default all elements have a transparent background.

The background-image property allows you to specify an image that will be displayed as a background for the entire page or for an individual element. In the example, we used image as the background for the entire page.

If there is a question why to set the background color when the background image is used, it can be easily answered: if for some reason the background image cannot be loaded on the page, in this case the background color will be displayed.

Repeating a background image

By default, the background image repeats vertically and horizontally, thus filling all the available space in the element. Repeat the background image can be redefined using the background-repeat property, consider its possible values:

no-repeat - background image does not repeat
repeat-x - repeats the background image only horizontally
repeat-y - repeats the background image vertically
repeat - the background image occupies all available space by repeating horizontally and vertically (is the value by default)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body {
        background-image: url('flower.png');
        background-repeat: no-repeat;
        padding-left: 150px; /*Indent from the left edge equal to the width of the image*/
      }
    </style>
  </head>

  <body>

    <h1>Decorate the page with a background image!</h1>
    <p>When adding an image to the background of an element, the text can hit on it,
	which can spoil the impression of the page. To prevent this from happening,
	an indent from the left edge, equal to the width of the image,
	was added for all elements.</p>

  </body>
</html>

Try it »

Positioning the background image

By default, the background image is located in the upper left corner of the browser window or the element. If the background image does not repeat (background-repeat: no-repeat;) or should be repeated from a specific location, you can use the background-position property to specify where in the browser window or element it should be placed. This property usually takes two values, separated by a space. The first value is the horizontal position, the second value is the vertical position.

The background-position property can accept the keywords: left, top, center, right and bottom. You can use any combination of keywords:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

body {
  background-image: url('circle.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  padding-right: 180px; /*padding from the right edge is equal to the width of the image*/
}

Try it »

If only one value is specified, then by default the second value is center:

background-position: right;

this is the same as:

background-position: right center;

You can also use pixels or percentages as values. They determine the distance from the top-left corner of the browser window (or the container element). The upper left corner corresponds to 0% 0%.

Fixing a background image

You probably have repeatedly visited the sites on which the background remains in place, and the content of the page scrolls over it. This effect is achieved using the background-attachment property, which determines whether the background image should remain in one place or it will scroll along with the rest of the content of the web page.

By default, the background scrolls along with the content, as an example, we fix our background image in one place with the value fixed:

body {
  background-image: url('flower.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

Try it »

background shorthand property

You can get the same result as in the previous example, but with fewer lines of code. To do this, you use the background property, which allows you to set the values of the background-color, background-image, background-repeat, background-attachment and background-position properties in a single property declaration:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      body {
        background: white url('flower.png') no-repeat fixed right top;
        padding-right: 150px;
      }
    </style>
  </head>

  <body>

    <h1>Combine background properties into a single declaration!</h1>
    <p>Using multiple property values in a single declaration can
	significantly reduce your CSS, and there will be no changes to the
	appearance of the page.</p>

  </body>
</html>

Try it »

Multiple background images

You can use the background property to add multiple background images to a single element. For this purpose it is necessary to specify a list of images, separating them with a comma. As with one image, you can add additional values to each background image:

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('circle.png') bottom right no-repeat,
              url('flower.png') repeat-x;
}

Try it »

Adding multiple background images is supported in all newer versions of browsers, including IE9, but note that in older versions of browsers that do not support multiple backgrounds, the rule for the background will be ignored entirely.

It should be noted that the order of the images is important. The first image you add will be displayed above all others, the last one below all other background images. We can see how it works if the first background image is to set a image that has no transparent areas, in which case it will overlap all other images specified for the background:

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('../image.png'),
              url('circle.png') bottom right no-repeat,
              url('flower.png') repeat-x;
}

Try it »

If our images are swapped, making the first last in the list, it will be displayed under all other images, setting the main background for the element:

div {
  height: 360px;
  width: 400px;
  border: 3px solid #333;
  background: url('circle.png') bottom right no-repeat,
              url('flower.png') repeat-x,
			  url('../image.png');
}

Try it »