CSS background-image Property

This property allows you to set one or more images or gradients as the background of an element. It places the visual layer behind the actual content and does not affect the layout or flow of the page.

selector { background-image: url("path/to/image.jpg"); }
none Default setting that ensures no image is displayed in the background.
<url> Points to the file path or web address of the image you want to display.
<gradient> Generates a smooth color transition to be used as a background image.
inherit Forces the element to take the background-image value from its parent element.

Code Examples

A basic example applying a single background image to a container with a solid color fallback.

<div style="width: 100%; height: 200px; background-image: url('https://via.placeholder.com/400'); background-color: #cccccc; border: 2px solid #333333;">
  This box uses a basic background image with a fallback color.
</div>

An advanced example showing layered backgrounds (gradient over an image) and using JavaScript to dynamically swap between an image and a full gradient.

<div id="hero" style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; color: #ffffff; background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/800'); background-size: cover; background-position: center;">
  <div style="text-align: center;">
    <h1 id="headline">Dynamic Hero Section</h1>
    <button onclick="toggleDesign()">Toggle Background</button>
  </div>
</div>

<script>
function toggleDesign() {
  const hero = document.getElementById("hero");
  const isGradient = hero.style.backgroundImage.includes("red");
  
  if (isGradient) {
    hero.style.backgroundImage = "linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://via.placeholder.com/800')";
    document.getElementById("headline").innerText = "Image Background";
  } else {
    hero.style.backgroundImage = "linear-gradient(to right, #ff0000, #0000ff)";
    document.getElementById("headline").innerText = "Pure Gradient Background";
  }
}
</script>

Pro Tip

You can use a semi-transparent linear-gradient as an overlay by listing it before your image URL in a comma-separated list. This allows you to darken or tint a photo directly in CSS, making white text pop without needing to edit the original image file in a design program.

Deep Dive

Think of background-image like a wallpaper for a room. It sits behind your furniture (content) and doesn't push it around. You can stack multiple images by separating them with commas; the first one listed in your code appears on the very top of the stack. It supports various file types like JPG, PNG, SVG, and even CSS-generated gradients. The image is rendered within the element's padding box unless you specify otherwise. By default, if the image is smaller than the element, it repeats to fill the space like tiles on a bathroom floor. It is important to remember that this property only sets the image; you usually need background-size and background-position to make it look exactly right.

Best Practices

Always provide a background-color as a fallback. If your image fails to load or the user has images disabled, your text should still be readable against a solid color. Use SVGs for patterns to keep file sizes small and ensure they stay sharp on high-resolution screens. Optimize your raster images (JPG, WebP) before uploading to keep your page load times fast for your users.

Common Pitfalls

The most common mistake is forgetting that background images do not take up physical space. If your element has no content and no defined height or width, you won't see the image at all. Also, remember that file paths in a CSS file are relative to that CSS file, not the HTML page. Another issue is the default tiling behavior; if you don't want your image to repeat, you must manually set background-repeat to no-repeat.

Accessibility

Background images are purely decorative and are ignored by screen readers. If the image contains important information, you must put that information into the HTML text or use an img tag with proper alt text. Always check the contrast between your background image and the text sitting on top of it so that everyone can read your content comfortably.

Dev Data Table: background-image property

default none
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1996
js_syntax_1 element.style.backgroundImage = "url('image.jpg')";
js_syntax_2 element.style.setProperty("background-image", "url('image.jpg')");
js_note When manipulating this property in JavaScript, ensure the entire URL value is wrapped in quotes as a string.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10.1 }
results render here...