HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Multiple Backgrounds

❮ Previous Next ❯

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

You will also learn about the following properties:

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

CSS Multiple Backgrounds

CSS allows you to use multiple images as a background for an element by using the "background-image" property.

Several pictures are stacked on each other with commas in between. The image that's closest to the viewer is the top one.

This demonstration features two background images. The first image is of a flower positioned in the lower-right corner, while the second image is a paper background located in the upper-left corner.

Example

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}
Try it Yourself »

You can put more than one background image in two different ways: by using individual background properties (similar to the example above) or by using the "background" shortcut property.

In this instance, we're employing a code snippet with a class called "ppt-codespan" to demonstrate the use of the "background" shorthand property. This property provides us with the identical result as demonstrated in the previous example..

Example

#example1 {
  background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}
Try it Yourself »

CSS Background Size

You can change the size of your background images using a CSS property called "background-size."

You can adjust the dimensions by using numbers, percentages, or selecting either "contain" or "cover."

In this example, we make a background image much smaller than its original size, using 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:

Example

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

The background-size property has two options: contain and cover.

In HTML, the "contain" keyword is used to make a background image as large as possible while ensuring it fits perfectly within the content area in terms of both width and height. This means that depending on the background image's shape and the available space, some parts of the image might not be fully visible.

The "cover" keyword has a unique purpose when it comes to background images. It ensures that the entire content area gets covered by the background image, making sure both its width and height are equal to or larger than the content area. As a result, some portions of the background image might not be visible within the background area where it's positioned.

Here's an example that shows how to use 'contain' and 'cover' with code:

Example

#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 Sizes of Multiple Background Images

The background-size property can have multiple values to determine the size of a background. If you want to specify the size for multiple backgrounds, you can create a list with values separated by commas.

In this instance, there are three images in the background, and each of them is a different size.

Example

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}
Try it Yourself »

Full Size Background Image

We want to place an image as the background of a website that covers the entire web browser screen constantly.

Here are the requirements:

  • Fill the entire page with the image (no white space)
  • Scale image as needed
  • Center image on page
  • Do not cause scrollbars

In this example, we will show you how to do something step by step. First, we use the element, which is always as high as the web browser window. Then, we add a background that stays in one place and is in the middle. Lastly, we adjust the size of the background using the background-size property.

Example

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

Hero Image

You can use different background options for a <div> element to create a hero image. A hero image is basically a large picture with text next to it, and you can place it wherever you want.

Example

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

CSS background-origin Property

The CSS code for "background-origin" helps determine where the background image should be positioned.

This attribute has three different options:

  • 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

The example below shows how to use the background-origin property. It specifies the origin of a background image.

Example

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

CSS background-clip Property

The "background-clip" CSS property determines where the background should show up.

This property has three different values:

  • border-box - (default) the background is painted to the outside edge of the border
  • padding-box - the background is painted to the outside edge of the padding
  • content-box - the background is painted within the content box

Here's an example that shows how to use the background-clip property. It's used to control the background of an element.

Example

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

CSS Advanced Background Properties

Property Description
background A quick method to configure all background properties simultaneously with a single command.
background-clip Defines the space where the background image is displayed.
background-image Defines one or more pictures to be used as a background for an element.
background-origin Defines the location of the background image or images.
background-size Defines the dimensions of the background image(s).
❮ Previous Next ❯