CSS Backgrounds: Colors, Repeats, Sizes, and Positions

Master CSS background properties. Learn how to manage background colors, repeats, sizes, attachments, and positions with shorthands.

Introduction

If you open a premium website, you will rarely see a plain white backdrop. Instead, you see smooth textured colors, fixed hero banners that stay in place as you scroll, and fully stretched images that fit perfectly on any monitor resolution.

In CSS, managing the visual canvas behind your content is done using Background Properties. Rather than just using background-color, CSS provides a collection of properties that allow you to control background image sizes, alignment positions, repetition states, and scroll behaviors, alongside a concise shorthand syntax to combine them.

What You Will Learn

  • The essential CSS background properties.
  • How to position backgrounds (background-position).
  • The differences between cover and contain in background-size.
  • Fixed vs. scrolling background attachments (background-attachment).
  • Combining properties using the background shorthand syntax.

Prerequisites

Detailed Explanation: Background Properties

CSS provides several independent properties to customize backgrounds:

1. Background Repeat (background-repeat)

By default, if a background image is smaller than the element's box container, the browser tiles (repeats) it horizontally and vertically.

  • repeat: (Default) Tiles in both directions.
  • no-repeat: Renders the image exactly once.
  • repeat-x / repeat-y: Tiles only horizontally or vertically.

2. Background Size (background-size)

Controls how the background image scales to fit the container:

  • auto: (Default) Renders the image at its original width and height.
  • cover: Scales the image to completely cover the container. Some parts of the image may be cropped to maintain aspect ratio.
  • contain: Scales the image to be fully visible inside the container. May leave empty gaps on the sides.
  • Percentage/Pixels: E.g. 100% 100% stretches the image, violating aspect ratio.

3. Background Position (background-position)

Defines the starting coordinate of the background image:

  • Keywords: top left, center, bottom right.
  • Coordinates: E.g. 20% 50% or 10px 50px.

4. Background Attachment (background-attachment)

Determines whether the background image scrolls with the page:

  • scroll: (Default) The background scrolls along with the page content.
  • fixed: The background stays locked in place relative to the viewport, creating a parallax scrolling effect.

5. The background Shorthand

To compress your stylesheet, combine these properties into a single line:

/* background: color image position / size repeat attachment; */
body {
  background: #0f172a url('bg.png') center / cover no-repeat fixed;
}

Note: When using shorthand, the size parameter MUST be written after the position, separated by a slash (e.g. center / cover).

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Background Size Comparison
    Cover[background-size: cover <br> Image stretches to fill card <br> Crops boundaries]
    Contain[background-size: contain <br> Entire image visible <br> Leaves empty margin gaps]
    end

Code Examples

Example 1: Full-Screen Fixed Hero Banner

Let's build a full-page banner with a fixed background image:

.hero-section {
  /* Height equal to 100% of viewport height */
  height: 100vh; 
  
  /* Apply background styles using shorthand */
  background: #0b0f19 url('hero-pattern.jpg') no-repeat center / cover fixed;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content {
  color: white;
  text-align: center;
}

Example 2: Non-Repeating Pattern Sidebar

Use a vertical pattern repeat for a sidebar menu:

.sidebar {
  width: 250px;
  min-height: 100vh;
  background-color: #1e293b;
  
  /* Repeat a small pattern strip vertically only */
  background-image: url('pattern-strip.png');
  background-repeat: repeat-y;
  background-position: right top;
}

Summary

CSS background properties govern the visual backdrops behind HTML elements. By configuring repeats, positioning coordinates, scaling attributes like cover and contain, and utilizing fixed attachments, developers can create responsive, multi-layered layouts, compressing declarations via the background shorthand syntax.

Related Articles

Next Tutorial

How do we import, scale, and optimize actual image files as backgrounds? Let's check: Background Images.

← Back to Syllabus