CSS - Background



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:

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.
Advertisements