CSS Backgrounds | Learn Code With Durgesh

CSS Backgrounds – Color, Images, Position, Repeat & Size

Backgrounds are a key part of web design because they define the visual canvas behind elements, improving readability, aesthetics, and user experience. CSS allows you to control backgrounds with precision and flexibility, whether it’s a solid color, an image, or a combination.

Background Color

The background-color property sets a solid color behind an element, filling its content, padding, and optionally the border area.

Example:

div {
  background-color: lightblue;
}

Background Image

The background-image property applies an image behind an element. You can use a single image or multiple layered images.

Always pair with a fallback background color for accessibility and slower connections.
Supports multiple images by separating URLs with commas.

Example:

section.hero {
  background-image: url('hero-background.jpg');
}

Background Position

The background-position property controls where the background image is placed inside the element.

Values:

Keywords: top, center, bottom, left, right
Percentages: 50% 50% → centers the image
Pixels: 10px 20px → exact position from top-left corner

Example:

div.banner {
  background-image: url('banner.jpg');
  background-position: center top;
}

Background Repeat

The background-repeat property defines whether and how a background image repeats.

Values :

Value	Description
`repeat`	Default; repeats horizontally and vertically
`repeat-x`	Repeats only horizontally
`repeat-y`	Repeats only vertically
`no-repeat`	Shows the image only once

Example:

div.banner {
  background-image: url('pattern.png');
  background-repeat: repeat-x;
}

Background Size

The background-size property controls how large the background image appears within the element.

Common Values:

Value	Description
`auto`	Default; keeps original image size
`cover`	Scales image to cover entire element (may crop)
`contain`	Scales image to fit element without cropping
`width height`	Custom dimensions (e.g., `100% 100%`)

Example:

section.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Combining Background Properties

CSS allows you to combine multiple background properties into a shorthand:

element {
  background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}

Explanation:

#f0f0f0 → fallback color
url('bg.jpg') → background image
no-repeat → image displayed once
center → position
cover → size

CSS Backgrounds Flowchart

Full Example in HTML + CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Background Example</title>
  <style>
    body {
      background-color: #f0f0f0; /* fallback color */
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .hero {
     height: 300px;
      background-image: url('hero.jpg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 2em;
    }

    .pattern {
      height: 200px;
      background-image: url('pattern.png');
      background-repeat: repeat;
      background-position: top left;
      background-color: lightblue;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="hero">
    Hero Section with Cover Background
  </div>

  <div class="pattern">
    Patterned Background with Repeating Image
  </div>

</body>
</html>

Output :