CSS multiple backgrounds

In this chapter, you will learn how to add multiple background images to an element.

You will also learn the following properties:

  • background-size
  • background-origin
  • background-clip

CSS multiple backgrounds

CSS allows you to use background-image This property adds multiple background images to an element.

Different background images are separated by commas, and they are stacked on top of each other, with the first image closest to the viewer.

The following example has two background images: the first image is a flower (aligned with the bottom and right), and the second image is a paper background (aligned with the top left):

Instance

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

Try It Yourself

Multiple background images can be specified using a separate background property (as described above) or background to specify the abbreviated properties.

The following example uses background Abbreviated properties (result is the same as the example above):

Instance

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

Try It Yourself

CSS Background Size

CSS background-size The property allows you to specify the size of the background image.

Background image size can be specified using length, percentage, or one of the following two keywords:contain or cover.

The following example adjusts the size of the background image to be much smaller than the original image (in pixels):

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Here is the code:

Instance

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

Try It Yourself

background-size The other two possible values are contain and cover.

contain keywords will scale the background image to the largest possible size (but its width and height must fit the content area). Depending on the ratio of the background image and the background positioning area, there may be some background areas not covered by the background image.

cover keywords will scale the background image to cover the content area completely (its width and height are equal to or larger than the content area). As a result, some parts of the background image may not be visible in the background positioning area.

The following examples demonstrate: contain and cover Usage:

Instance

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

Try It Yourself

Define the size of multiple background images

When dealing with multiple backgrounds,background-size The property can also accept multiple values for setting the background size (a list separated by commas).

The following example specifies three background images, each with a different background-size value:

Instance

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

Try It Yourself

Full-size background image

Now, we want the background image on the website to always cover the entire browser window.

Specific requirements are as follows:

  • Fill the entire page with the image (no blank space)
  • Scale the image as needed
  • Center the image on the page
  • Do not trigger the scroll bar

The following example shows how to implement it: Use the <html> element (the <html> element is always at least the height of the browser window). Then set a fixed and centered background on it. Finally, adjust the size using the background-size property:

Instance

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

Try It Yourself

Hero Image

You can also use different background properties on the <div> to create a Hero Image (a large image with text) and place it at the desired location.

Instance

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

Try It Yourself

CSS background-origin Attribute

CSS background-origin This property specifies the position of the background image.

This property accepts three different values:

  • border-box - The background image starts from the top left corner of the border
  • padding-box - The background image starts from the top left corner of the padding (default)
  • content-box - The background image starts from the top left corner of the content

The following examples demonstrate: background-origin Properties:

Instance

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

Try It Yourself

CSS background-clip Attribute

CSS background-clip This property specifies the drawing area of the background.

This property accepts three different values:

  • border-box - Draw the background to the outer edge of the border (default)
  • padding-box - Draw the background to the outer edge of the padding
  • content-box - Draw the background within the content box

The following examples demonstrate: background-clip Properties:

Instance

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

Try It Yourself

Advanced CSS Background Properties

Properties Description
background A shorthand attribute used to set all background properties in one declaration.
background-clip Specify the drawing area of the background.
background-image Specify one or more background images for an element.
background-origin Specify the placement position of the background image.
background-size Specify the size of the background image.