← Back to Chapters

CSS Background Image

?️ CSS Background Image

? Quick Overview

The background-image property in CSS allows you to place an image behind any HTML element. It’s commonly used for banners, cards, hero sections, and full-page backgrounds to improve design and branding.

  • Supports local files and online URLs
  • Can fallback to background color
  • Allows multiple background layers

You can apply background-image on almost any element: the entire <body>, a specific <section>, buttons, cards, or even small inline blocks. Usually this property is written in an external CSS file, but it can also be used in a <style> block or in inline styles using the style attribute.

Background images are purely visual and do not affect the HTML structure or accessibility directly, so always make sure important information is still available as real text or HTML content, not only inside images.

? Key Concepts

  • Image source: URL path of the image
  • Repeat: Controls tiling
  • Position: Controls alignment
  • Size: Controls scaling
  • Attachment: Scroll or fixed
  • Multiple images: Layering using commas

Together, these properties let you control how the image appears: whether it fills the element, repeats like tiles, stays fixed while scrolling, or sits in a specific corner. You usually combine background-image with background-repeat, background-position, background-size, and sometimes background-attachment to get the exact effect you want.

? Syntax / Theory

? View Code Example 
/* Basic syntax for background image */
selector {
background-image: url('image.jpg');
}

The url() function can take:

  • A relative path like url('images/bg.png')
  • An absolute path like url('/assets/hero.jpg')
  • A full remote URL like url('https://example.com/bg.png')

File names with spaces should be wrapped in quotes, for example: url("my background.png"). In real projects, you’ll often keep images in a dedicated images or assets folder to keep things organised.

? Code Examples

Single Image

? View Code Example 
/* Single background image */
.box {
background-image: url('https://via.placeholder.com/400x200');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

Here, .box is any element (like a <div>) that will display one background image. The image will be centered inside the box, not repeated, and scaled to cover the entire area, which means some cropping may occur to keep the image’s aspect ratio intact.

? Conceptual Output for .box

Imagine a card or banner like:

<!-- HTML structure -->
<div class="box">
  <h2>Welcome</h2>
  <p>This card uses a full background image.</p>
</div>

With the above CSS, the entire .box area would be filled edge-to-edge with the image, and the text content would appear on top of the image.

Multiple Images

? View Code Example 
/* Multiple background layers */
.banner {
background-image: url('img1.png'), url('img2.png');
background-repeat: no-repeat, no-repeat;
background-position: left top, right bottom;
}

In this example, the first URL img1.png is the topmost layer, and img2.png is behind it. Properties like background-repeat and background-position accept comma-separated values, each one matching the corresponding image.

? Conceptual Output for .banner

Think of a hero section where:

  • A logo graphic sits in the top-left corner.
  • A decorative shape appears in the bottom-right corner.
  • Both are added as background layers, leaving the middle free for text content.

? Live Output / Explanation

This box shows a centered background image using contain.

  • contain keeps the entire image visible
  • no-repeat prevents tiling
  • center keeps image aligned

If you changed background-size to cover, the image would fill the entire box, possibly cropping some parts. If you removed no-repeat, the image could start tiling (repeating) horizontally and vertically depending on the element’s size.

? Tips & Best Practices

  • Always compress images for performance
  • Use cover for full-screen designs
  • Use fallback background colors
  • Avoid very large images for mobile
  • Test on different resolutions
  • Prefer background-image for decorative graphics and use <img> tags for meaningful content that needs alt text.
  • Keep the contrast between text and background image high (use overlays like semi-transparent black or white if needed).

? Try It Yourself

  1. Apply a background image to a div
  2. Try cover vs contain
  3. Use two images together
  4. Fix one background while scrolling
  5. Create a hero banner
  6. Create a full-page background on the <body> element with background-size: cover;.
  7. Add a solid background-color as a fallback for when the image fails to load.
  8. Experiment with background-position values like top, bottom, left, right, and center.