CSS Background

CSS Background Properties Explained with Examples

CSS provides a range of properties to control the background of HTML elements, allowing for customization of colors, images, and other background effects.

Basic Background Properties

  1. background-color: Sets the background color of an element. 
    body {
  background-color: lightblue;
}

    Try It Now

  2. background-image: Sets an image as the background of an element. 
    div {
  background-image: url('background.jpg');
}

    Try It Now

  3. background-repeat: Defines whether the background image is repeated.
    • repeat (default): Repeats the image both horizontally and vertically.
    • repeat-x: Repeats the image horizontally.
    • repeat-y: Repeats the image vertically.
    • no-repeat: Prevents the image from repeating. 
      div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

      Try It Now

  4. background-position: Specifies the position of the background image.
    • Values: top, right, bottom, left, center, or specific coordinates. 
      div {
  background-image: url('background.jpg');
  background-position: center;
}

      Try It Now

  5. background-size: Specifies the size of the background image.
    • auto: Default, keeps original size.
    • cover: Scales the image to cover the entire element.
    • contain: Scales the image to fit within the element. 
      div {
  background-image: url('background.jpg');
  background-size: cover;
}

      Try It Now

  6. background-attachment: Determines if the background image scrolls with the page or is fixed.
    • scroll (default): Background scrolls with the element.
    • fixed: Background is fixed in place.
    • local: Scrolls with the element’s content. 
      div {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

      Try It Now

  7. background-clip: Specifies the painting area of the background.
    • border-box (default): Background extends to the outside edge of the border.
    • padding-box: Background is painted up to the padding edge.
    • content-box: Background is painted within the content box. 
      div {
  background-clip: padding-box;
}

      Try It Now

Shorthand Property

The background shorthand property allows you to specify multiple background properties in one declaration:

div {
  background: url('background.jpg') no-repeat center/cover;
}

Try It Now

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      background-color: lightgray;
    }

    .container {
      width: 300px;
      height: 300px;
      background-image: url('background.jpg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      background-attachment: fixed;
      border: 1px solid #000;
    }
  </style>
  <title>CSS Background Example</title>
</head>
<body>

<div class="container">
  This is a container with a background image.
</div>

</body>
</html>

Try It Now

Explanation:

  • body { background-color: lightgray; }: Sets a light gray background for the entire page.
  • .container { ... }: Defines a container with a fixed-size background image that is centered, covers the entire container, and does not repeat.

This example showcases how to effectively use CSS background properties to enhance the visual appeal of a web page.