”;
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. |
”;