CSS Multiple Backgrounds

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color..

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

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.

Multiple background images is a cool feature of CSS3. The syntax is easy, you just comma separate them. I find it's easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn't obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

Example -

Multiple background images can be specified using either the individual background properties (as above) or the background shorthand property.You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

The background property is a shorthand property that sets the background properties of an element as a color, an image, or, as a fallback, both. The background property sets the following properties: background-color, background-image, background-repeat, background-attachment, and background-position, in one shorthand notation.

CSS Background Size

The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example:

That's an example of the two-value syntax for background size. There are four different syntaxes you can use with this property: the keyword syntax, the one-value syntax, the two-value syntax, and the multiple background syntax.In addition to the default value (auto), there are two keywords you can use with background-size: cover and contain

The contain keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.

Define Sizes of Multiple Background Images

The background-size CSS property makes it possible to adjust the width and height of background images, thus overriding the default behavior which tiles background images at their full size. You can scale the image upward or downward as desired.The background-size property also accepts multiple values for background size (using a comma-separated list), when working with multiple backgrounds.

Full Size Background Image

The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example:

We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.

The requirements are as follows:

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

CSS background-origin Property

The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property.The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding.There are four values: border-box, padding-box, content-box and inherit.

The background-origin CSS property specifies the positioning area of the background, that is the position of the origin of an image specified using the background-image property.

The property takes three different values:

  • 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

CSS background-clip Property

The background-clip property specifies the area within which the background is painted.An element in CSS has 3 areas, called boxes, defined inside it: the border box, the padding box, and the content box. There’s also a fourth area called the margin box which includes the element and its outer margin.

The property takes 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