HTML Background Images

A regular <img> tag places a picture as content on the page, competing for space alongside text like any other element. A background image instead paints a picture behind an element's content, similar to wallpaper behind furniture in a room -- the content sits on top of it, and the image itself is purely decorative, playing no role in the page's actual information.

In this page:

Setting a Basic Background Image
Controlling Tiling with background-repeat
Positioning with background-position
Scaling with background-size
Layering Multiple Background Images

Setting a Basic Background Image

background-image: url("path/to/image.jpg") paints an image behind an element's content, using the same relative or absolute path syntax as a normal <img> src attribute. Unlike an <img> tag, the image itself never appears in the page's HTML content -- it is purely a CSS painting effect.

Note: Always pick an image with enough plain area or low contrast where your text will sit, so foreground content stays readable.

Warning: A background image with no explicit background-color fallback shows nothing but blank space if the image file fails to load.

Example: Setting a Basic Background Image

markup

<style>
  .hero {
    background-image: url("photo.jpg");
    background-color: gray;
  }
</style>
<div class="hero">Hero content</div>

Controlling Tiling with background-repeat

By default, a background image smaller than its container repeats (tiles) both horizontally and vertically to fill the available space. background-repeat: no-repeat shows the image just once, while repeat-x or repeat-y limits tiling to a single direction, useful for a decorative strip pattern.

Note: Use no-repeat for photographic hero images, and reserve actual tiling for small, seamless pattern textures designed to repeat.

Warning: A large photo left at the default repeat setting can accidentally tile into a jarring, unintended grid if the container is larger than the image.

Example: Controlling Tiling with background-repeat

markup

<style>
  .hero {
    background-image: url("photo.jpg");
    background-repeat: no-repeat;
  }
</style>
<div class="hero">Hero content</div>

Positioning with background-position

background-position controls where within its container the image is anchored, using keywords like center or top right, or explicit values like 20px 50%. This determines which part of the image is visible first when the container is smaller than the full image.

Note: Use background-position: center when you are not sure exactly how the container will be cropped, since it keeps the most important part of the image visible.

Warning: A background-position value like "bottom" can crop off the top of a portrait-oriented photo unexpectedly if the container is short and wide.

Example: Positioning with background-position

markup

<style>
  .hero {
    background-image: url("photo.jpg");
    background-position: center;
  }
</style>
<div class="hero">Hero content</div>

Scaling with background-size

background-size controls how large the image renders relative to its container -- cover scales the image to fill the entire container while cropping any overflow, and contain scales it to fit entirely inside the container without cropping, possibly leaving empty space around it.

Note: Use background-size: cover for full-bleed hero banners, and contain when you need to guarantee the entire image stays visible, like a logo.

Warning: background-size: cover can crop off important parts of an image (like faces) on very wide or very narrow containers, so choose the crop area carefully.

Example: Scaling with background-size

markup

<style>
  .hero {
    background-image: url("photo.jpg");
    background-size: cover;
  }
</style>
<div class="hero">Hero content</div>

Layering Multiple Background Images

CSS allows more than one background-image on a single element by separating url() values with commas -- the first listed image renders on top and later ones render beneath it, which is useful for combining a gradient overlay with a photo to keep overlaid text readable.

Note: Layer a semi-transparent dark gradient over a photo background to guarantee light-colored text stays readable regardless of the photo's content.

Warning: When layering multiple background images, background-position and background-size values must be listed in matching comma-separated order to apply to the correct layer.

Example: Layering Multiple Background Images

markup

<style>
  .hero {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("photo.jpg");
  }
</style>
<div class="hero">Hero content</div>

Common Mistakes

Using a background image for content that conveys real information, like a product photo, when it should be a real <img> tag with alt text for accessibility and SEO.
Forgetting background-repeat: no-repeat, causing a background image smaller than its container to visibly tile in a distracting grid pattern.
Setting a background-image without a fallback background-color, leaving a blank white gap if the image fails to load.

Chapter Summary

background-image accepts a url() reference to an image file and paints it behind an element's content.
background-repeat, background-position, and background-size together control how the image tiles, is placed, and is scaled.
Background images are purely decorative and invisible to screen readers, so real content should always use an <img> tag instead.

Browser Support

The background-image property and its sizing/positioning companions are supported in every modern browser and have been part of CSS since CSS1/CSS2.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML Images Next Lesson → HTML Project

HTML Background Images

Setting a Basic Background Image

Controlling Tiling with background-repeat

Positioning with background-position

Scaling with background-size

Layering Multiple Background Images

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code