Utilizor
Contact Us

CSS Backgrounds Advanced

CSS allows you to add multiple background images for an element.

CSS Advanced Backgrounds

CSS allows you to add multiple background images for an element, through the background-image property.

Multiple Backgrounds

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

This div has two background images:

The first image is a flower (aligned to the bottom right).

The second image is a paper background (aligned to the top left).

Background Size

The background-size property specifies the size of the background images.

  • auto: Default. The background image is displayed in its original size.
  • cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.
  • contain: Resize the background image to make sure the image is fully visible.

Background Origin

The background-origin property specifies where the background image is positioned.

  • border-box: The background image starts from the upper left corner of the border.
  • padding-box: (Default) The background image starts from the upper left corner of the padding edge.
  • content-box: The background image starts from the upper left corner of the content.

Example

body {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}