Backgrounds — background-color, background-image, and background Properties

Background properties control what appears behind an element’s content. You have already used background-color — this lesson covers the full family of background properties and how they work together to produce the kind of backgrounds you see on real websites.

background-color

background-color fills the element’s content and padding area with a solid color:

.tour-card {
  background-color: #fff;
}

.site-header {
  background-color: #2c4a1e;
}

It is always a good practice to set a background-color alongside a background-image as a fallback — if the image fails to load, the color displays instead.

background-image

background-image sets an image as the background. The value is a url() function pointing to the image path:

.hero {
  background-image: url('../images/hero-mountain.jpg');
}

The path is relative to the CSS file’s location. By default, background images:

• Start at the top-left corner of the element
• Tile (repeat) horizontally and vertically to fill the element
• Do not scale to fit — they display at their natural size

That default behavior is rarely what you want for a full-bleed hero image. The properties below let you control it precisely.

background-repeat

Controls whether and how the image tiles:

/* Don't repeat at all */
.hero { background-repeat: no-repeat; }

/* Repeat horizontally only (for seamless horizontal patterns) */
.pattern-strip { background-repeat: repeat-x; }

/* Repeat vertically only */
.sidebar { background-repeat: repeat-y; }

/* Default — tile in both directions */
.texture { background-repeat: repeat; }

For hero sections with a single large image, always use no-repeat.

background-size

Controls how the image is scaled within the element:

cover — scales the image until it completely fills the element. The image maintains its aspect ratio but may be cropped on one or both dimensions. This is the standard for hero images.

.hero { background-size: cover; }

contain — scales the image until the entire image fits within the element. The image maintains its aspect ratio and will never be cropped — but it may leave empty space (letterboxing) if the element’s proportions differ from the image’s.

.logo-bg { background-size: contain; }

Explicit dimensions — set exact width and height:

.icon-bg { background-size: 48px 48px; }
.full-width { background-size: 100% auto; }

background-position

Controls where the image is anchored within the element:

/* Keyword values */
.hero { background-position: center; }       /* centered both axes */
.hero { background-position: top center; }   /* top, centered horizontally */
.hero { background-position: bottom right; } /* bottom-right corner */

/* Percentage values */
.hero { background-position: 50% 30%; }

/* Pixel offset from top-left */
.hero { background-position: 0 120px; }

For hero images, center center (or just center) is almost always correct — it keeps the most important part of the image (the middle) visible regardless of the element’s dimensions.

background-attachment

Controls whether the background scrolls with the page:

/* Default — image scrolls with the content */
.hero { background-attachment: scroll; }

/* Image stays fixed while the page scrolls (parallax effect) */
.hero { background-attachment: fixed; }

background-attachment: fixed creates a parallax-style effect. Use it sparingly — it can hurt performance on mobile devices and is disabled by many mobile browsers.

The background shorthand

All background sub-properties can be combined in one declaration. The order is flexible, but the convention is: color, image, repeat, position / size, attachment:

.hero {
  background: #2c4a1e url('../images/hero-mountain.jpg') no-repeat center / cover;
}

Note the / between position and size — that separator is required when both are present in the shorthand.

The analogy: background properties are like decisions when hanging a photograph — you choose the image, how to crop or fit it to the frame (size), where to position the photo within the frame (position), and whether the frame itself moves when you scroll (attachment).

Layering multiple backgrounds

CSS supports multiple background layers on a single element, separated by commas. The first layer listed is on top:

.hero {
  background:
    rgba(0, 0, 0, 0.4),                             /* dark overlay on top */
    url('../images/hero-mountain.jpg') no-repeat center / cover; /* image below */
}

This is the modern approach for adding a color overlay to a background image — without needing a pseudo-element.

Exercise

Build a full-bleed hero section for the STO homepage:

1. In index.html, ensure your hero section has a class:

<section class="hero">
  <div class="hero-content">
    <h1>Summit Trail Outfitters</h1>
    <p>Guided hiking adventures in the Pacific Northwest.</p>
  </div>
</section>

2. In style.css, style the hero with a background image and overlay:

.hero {
  min-height: 500px;
  display: flex;
  align-items: center;
  background:
    rgba(44, 74, 30, 0.55),
    url('../images/hero.jpg') no-repeat center / cover;
  background-color: #2c4a1e; /* fallback if image fails */
}

.hero-content {
  max-width: 700px;
  padding: 2rem;
}

.hero h1 {
  color: #f5f0eb;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  color: #d0e8c5;
  font-size: 1.2rem;
}

3. If you do not have a hero image yet, the background-color: #2c4a1e fallback will show a solid green background — that is correct behavior.

4. Open the browser and resize the viewport. The background image should always fill the hero section regardless of the window size.

Recap

• background-color fills the content and padding area; always set it as a fallback alongside background-image.
• background-image: url() sets an image background; by default it tiles and displays at natural size.
• background-repeat: no-repeat prevents tiling for hero images.
• background-size: cover fills the container without distortion, cropping as needed; contain fits the image without cropping.
• background-position: center keeps the image centered regardless of container size.
• The background shorthand: background: color image repeat position / size.
• Layer a semi-transparent color over an image using multiple backgrounds with rgba() as the first layer.

Lesson 03 shifts from color to typography — font-family, font-size, font-weight, and font-style — the four properties that control what the text itself looks like.