CSS - Background Property

The background property of CSS is used to set the background of an element. It can be used to apply a single background image or multiple background images, as well as defining the background color, size, position, repeat behavior, and other related properties.

It is a versatile tool for styling the appearance of elements and adding visual interest to web pages.

The background is a shorthand for the following properties:

background-attachment: Specifies the position of the background relative to the viewport, either fixed or scrollable.
background-clip: Controls how far a background image extends beyond the element's padding or content box.
background-color: Sets the background color of an element.
background-image: Sets one or more background image(s) on an element.
background-origin: Sets the origin of the background.
background-position: Sets the initial position of each image in a background.
background-repeat: Controls the repetition of an image in the background.
background-size: Controls the size of the background image.

Overview

The background property allows to set one or multiple layers of background, separated by commas.
Each layer in the background may have zero or atleast one occurrence of the following values:
- <attachment>
- <bg-image>
- <position>
- <bg-size>
- <repeat-style>
If <bg-size>is to be added, it must be included immediately after <position>, separated with '/'. For example: "left/50%".
Value of <box> can be included zero, one or two times. Based on the number of occurrences, following values are set:
- once - sets the values for both background-origin and background-clip.
- twice - first sets the value of background-origin and second sets the value of background-clip.
The value of background-color may be included in the last layer specified as background.

Possible Values

Following are the possible values that the background shorthand property can have:

<attachment>: Specifies the position of the background, whether fixed or scrollable. Default is scroll.
<box>: Default is border-box and padding-box respectively.
<background-color>: Sets the color of the background. Default is transparent.
<bg-image>: Sets the one or more background image. Default is none.
<position>: Sets the initial position of the background. Default is 0% 0%.
<repeat-style>: Controls the repetition of the image in background. Default is repeat.
<bg-size>: Controls the size of the background image. Default is auto.

Syntax

background = background-color | bg-image | bg-position / bg-size | repeat-style | attachment | box;

CSS Background - With Image And Background color

Here is an example of setting a background using the shorthand property background, where an image and background color is specified:

<html>
<head>
<style>  
   body {
      background: url('images/scenery2.jpg') center/40% 50% no-repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2>Shorthand Background</h2>
</body>
</html>

CSS Background - Image Repeat

Here is an example of setting a background using the shorthand property background, where image is repeated:

<html>
<head>
<style>  
   body {
      background: url('images/scenery2.jpg') repeat fixed padding-box content-box lightblue;
   }
</style>
</head>
<body>
   <h2 style="color: white;">Shorthand Background - background repeated</h2>
</body>
</html>

CSS Background - Image With Background Color

Here is an example of setting a background using the shorthand property background, where two images are added and a background color:

<html>
<head>
<style>  
   body {
      background: url('images/orange-flower.jpg') right bottom/30% 60% no-repeat, 
      url('images/pink-flower.jpg') left top/30% 60% no-repeat lightgoldenrodyellow;
   }
</style>
</head>
<body>
   <h2 style="color: black; text-align: center;">Shorthand Background - two images</h2>
</body>
</html>

CSS Backgrounds- Related Properties

All the properties related to background are listed in the table below:

Property	Description
background	Shorthand for background related properties.
background-attachment	Specifies the position of the background relative to the viewport, either fixed or scrollable.
background-clip	Controls how far a background image extends beyond the element's padding or content box.
background-color	Sets the background color of an element.
background-image	Sets one or more background image(s) on an element.
background-origin	Sets the origin of the background.
background-position	Sets the initial position of each image in a background.
background-position-x	Sets the initial horizontal position of each image in a background.
background-position-y	Sets the initial vertical position of each image in a background.
background-repeat	Controls the repetition of an image in the background.
background-size	Controls the size of the background image.
background-blend-mode	Determines how an element's background images blend with each other.

Print Page