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. It is a shorthand property for follwoing properties:

  • The background-attachment: Specifies the position of the background relative to the viewport, either fixed or scrollable.

  • The background-clip: Controls how far a background image extends beyond the element's padding or content box.

  • The background-color: Sets the background color of an element.

  • The background-image: Sets one or more background image(s) on an element.

  • The background-origin: Sets the origin of the background.

  • The background-position: Sets the initial position of each image in a background.

  • The background-repeat: Controls the repetition of an image in the background.

  • The background-size: Controls the size of the background image.

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.

Applies to

All the HTML elements.

DOM Syntax

object.style.background = "Value according to the used property";

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 - With Repeat Image

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 - With Two Image

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