CSS Backgrounds

CSS backgrounds control what appears behind an HTML element's content. You can add a colour, an image, or both.

Backgrounds are commonly used for:

• Webpage sections
• Cards and banners
• Buttons
• Navigation menus
• Headers and footers

A simple background colour looks like this:

body {
  background-color: lightblue;
}

Background Colour

The background-color property adds a solid colour behind an element.

.card {
  background-color: #f2f5ff;
}

You can write colours using names, HEX, RGB, RGBA, HSL, or HSLA values.

.notice {
  background-color: rgba(255, 200, 0, 0.3);
}

The final RGBA value controls transparency. In this example, 0.3 creates a partly transparent background.

Background Image

The background-image property places an image behind an element.

.hero {
  background-image: url("images/banner.jpg");
}

The path inside url() tells the browser where to find the image.

It is important to:

• Use the correct image path.
• Choose an image that keeps text readable.
• Add a background colour as a fallback.
• Optimize large images to improve loading speed.

.hero {
  background-color: navy;
  background-image: url("images/banner.jpg");
}

Background Repeat

By default, a small background image repeats horizontally and vertically.

Use background-repeat to control this behaviour:

.pattern {
  background-image: url("images/pattern.png");
  background-repeat: no-repeat;
}

Common values include:

• repeat — repeats in both directions
• repeat-x — repeats horizontally
• repeat-y — repeats vertically
• no-repeat — displays the image once

Background Position

The background-position property controls where the image appears.

.hero {
  background-image: url("images/banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Other useful values include:

background-position: top;
background-position: bottom right;
background-position: 20px 40px;
background-position: 50% 50%;

The first value controls the horizontal position, while the second controls the vertical position.

Background Size

The background-size property controls the image's displayed size.

.hero {
  background-size: cover;
}

Important values are:

• cover — fills the entire element but may crop part of the image
• contain — displays the complete image but may leave empty space
• 100% 100% — stretches the image to match the element
• 300px 200px — uses a specific width and height

cover is commonly used for banners and hero sections.

.hero {
  background-image: url("images/course-banner.jpg");
  background-position: center;
  background-size: cover;
}

Background Attachment

The background-attachment property controls whether the background moves when the page scrolls.

.banner {
  background-attachment: fixed;
}

Common values include:

• scroll — the background scrolls with the page
• fixed — the background remains fixed in the viewport
• local — the background scrolls with the element's content

Fixed backgrounds may behave differently on some mobile devices, so test them carefully.

Background Shorthand

The background shorthand lets you write several background settings in one declaration.

.hero {
  background: navy url("images/banner.jpg") no-repeat center / cover;
}

This combines:

• Background colour
• Background image
• Repeat behaviour
• Image position
• Image size

Shorthand saves space, but beginners may find separate properties easier to read.