CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Multiple Backgrounds

The CSS provides several new properties to manipulate the background of an element.

The following section will describe you how to add multiple background images to one element.

You will also learn about the following properties:

For other background related properties please visit: CSS Backgrounds Chapter.


CSS Multiple Backgrounds

CSS gives you ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.

Run code

The following example uses the background shorthand property to add multiple backgrounds (same result as above):

Run code

Background Size

The background-size property specifies the size of the element's background image.

The size can be specified in pixels, percentages, or by using one of the two keywords: contain or cover.

Run code

The cover keyword scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

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.

The following example creates a full size background image:

Run code

Background Origin

The background-origin property sets the background positioning area.

This property can have following values:

  • border-box - the background is positioned relative to the border box
  • padding-box - the background is positioned relative to the padding box (This is default)
  • content-box - the background is positioned relative to the content box
Run code

Background Clip

The background-clip property specifies whether an element's background extends underneath it's border or not.

This property can have following values:

  • border-box - the background extends to the outside edge of the border (This is default)
  • padding-box - the background extends to the outside edge of the padding. No background is drawn beneath the border
  • content-box - the background extends to the edge of the content box
Run code