CSS Background Images

💡 The Concept

Why Background Images Matter in Web Design

CSS background images give you control over how images appear behind your content. Understanding the key properties — and when to use them — is what separates a plain layout from a polished one.

Adding a CSS Background Image

The fundamental property for adding a background image in CSS is background-image. You apply it to any element: the body, a div, a section, a header. Then you point it to an image file using the url() function as the CSS value.

This is what the code looks like.

body {
  background-image: url(images/my-background.jpg);
}

You can also use an absolute URL:

body {
  background-image: url(https://example.com/images/my-background.jpg);
}

When you first add a background image with no other properties, the default behavior may be unexpected.

Understanding Default Background Behavior

By default, a CSS background image will repeat both horizontally and vertically to fill the entire element, much like tiles covering a floor. If the image is smaller than the element, it tiles across the space.

This is rarely what you want for a photographic background. The additional background properties give you full control over how the image is displayed.

Essential Background Image Properties

background-repeat

The background-repeat property controls whether and how the image tiles. The most common values are:

• repeat, the default; tiles in both directions
• no-repeat, shows the image only once
• repeat-x, tiles horizontally only
• repeat-y, tiles vertically only

For most full-page or section backgrounds, use:

body {
  background-image: url(images/my-background.jpg);
  background-repeat: no-repeat;
}

background-size

The background-size property controls how the image is scaled within its container. In everyday practice, two values cover almost every situation.

cover — for hero sections and photo backgrounds

cover scales the image to completely fill the element, cropping the edges as needed. It is the standard choice whenever you want a photo to fill a section or the full page without empty space or distortion.

body {
  background-image: url(images/my-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

Because cover crops the image, you will often pair it with background-position to control which part stays visible. For example, if the subject of your photo is in the lower right, background-position: bottom right keeps it in frame. More on that below.

100% 100% — for abstract and pattern backgrounds

When your background is an abstract image, a texture, or a decorative pattern — not a photo with a focal point — 100% 100% stretches the image to exactly fill the element in both dimensions. This works well with images that can be stretched without looking distorted. Photos of real subjects will look wrong; abstract art and textures generally work fine.

body {
  background-image: url(images/abstract-texture.jpg);
  background-size: 100% 100%;
}

contain — good to know, rarely used

contain scales the image to fit entirely within the element without any cropping. The full image is always visible, but empty space may appear around it. This is occasionally useful for logos or icons used as backgrounds, but not practical for photos or decorative backgrounds.

background-position

When an image is cropped, especially with cover, background-position controls which part stays visible. That’s what background-position is for.

body {
  background-image: url(images/my-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

Common values include:

• center center, centers the image both horizontally and vertically (most common)
• top center, aligns to the top
• bottom right, anchors to the bottom-right corner
• Pixel or percentage values: 50% 25%

This is especially useful when the focal point of the photo is not centered, or when you need to keep text away from the subject.

background-attachment

The background-attachment property controls whether the background image scrolls with the page or stays fixed in place as the user scrolls. The two main values are:

• scroll, the default; the background scrolls with the content
• fixed, creates a parallax-like effect where the background stays in place

body {
  background-image: url(images/my-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}

The fixed attachment creates a parallax-like look popular on single-page and portfolio sites. Note that background-attachment: fixed does not always work well on mobile devices, so test thoroughly.

The Background Shorthand Property

Once you are comfortable with the individual properties, you can combine them into a single shorthand declaration. The background shorthand is concise:

body {
  background: url(images/my-background.jpg) no-repeat center center / cover;
}

The general order is:

background: [image] [repeat] [position] / [size] [attachment];

Note the forward slash (/) between position and size — this is required in the shorthand. The individual properties are always fine to use when they make the code easier to read.

Putting It All Together: A Practical Example

Here is a common real-world scenario: a hero section with a full-width background image and centered text on top.

<!-- HTML -->
<header class="hero">
  <h1>Welcome to My Website</h1>
  <p>Building beautiful things on the web.</p>
</header>

/* CSS */
.hero {
  background-image: url(images/hero-background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 500px;
  color: white;
  text-align: center;
}

This is one of the most common patterns in web design. The background image fills the entire header, and the text sits centered on top of it.

CSS Gradients as Backgrounds

You can also use a CSS gradient as a background — no image file needed. Gradients are covered in detail in the CSS Gradients lesson.

Video Demonstration

In this video I demonstrate how to use background-image in CSS.

Exercise: Try It Yourself

Step 1. Open JSFiddle.net. Paste this into the HTML panel:

<h1>Background Play</h1> 

Step 2. Add this image URL as your background image in the CSS panel:

https://webdevstudents.com/wp-content/uploads/2022/09/hd-wallpaper-2468874_1280-300x300.jpg

Step 3. In the CSS panel, add a background-image rule to the body using that URL:

Step 4. Try these background-repeat values one at a time:

background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat:repeat-y;

Step 5. Now try these background-size values:

background-size: cover;
background-size: 100% 100%;

Click Run. Your result should look something like this:

❓ Frequently Asked Questions

★ Key Takeaways

CSS background images are placed with CSS rather than HTML, which gives you more control over how they are positioned and sized. This lesson covered background-image, background-size, and background-position. Next, you will learn how to prepare images for the web, including how to resize and compress them. Optimized images load faster and improve the whole experience for visitors.

← Back to Web Images Lessons

← Back to All Lessons