To add a background image in CSS, you use the background-image (or shorthand background) property with a url() value pointing to your image file.

Basic syntax (quick start)

css

.selector {
  background-image: url("images/bg.jpg");
}
  • .selector can be body, a class like .hero, or an id like #header.
  • The string inside url() is the path to your image file (relative or absolute).

Example:

css

body {
  background-image: url("img/background.jpg");
}

Using the background shorthand

You can combine image, repeat, position, and size in one line with the background shorthand.

css

.hero {
  background: url("img/hero.jpg") center/cover no-repeat fixed;
}

This line means:

  • Image: url("img/hero.jpg")
  • Position: center
  • Size: cover (fills the container)
  • Repeat: no-repeat
  • Attachment: fixed (parallax-style effect)

Common properties you’ll use together

You’ll usually combine these with your background image:

  1. background-repeat

    css

background-repeat: no-repeat;    /* Don’t tile the image */
background-repeat: repeat-x;     /* Repeat horizontally */
background-repeat: repeat-y;     /* Repeat vertically */

  2. background-size

    css

background-size: cover;   /* Fill the area, cropping if needed */
background-size: contain; /* Show full image, may leave empty space */
background-size: 100% 100%; /* Stretch to fit */

  3. background-position

    css

background-position: center;      /* Center the image */
background-position: top right;   /* Top-right corner */
background-position: 50% 50%;     /* X% Y% */

  4. background-attachment

    css

background-attachment: scroll; /* Default, scrolls with page */
background-attachment: fixed;  /* Stays fixed, parallax-like */

Full-screen background image example

Use this pattern for a full-window background:

css

body {
  min-height: 100vh;
  margin: 0;
  background-image: url("img/full-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Using a class with a div

HTML:

html

<div class="banner">
  <h1>Welcome</h1>
</div>

CSS:

css

.banner {
  height: 300px;
  background-image: url("img/banner.jpg");
  background-size: cover;
  background-position: center;
}

Local files vs remote URLs

  • Local file (same project):

    css

.box {
  background-image: url("../img/pattern.png");
}

.. moves up one folder, then goes into img. This is common when your CSS is inside a css folder and your images are in an img folder.

  • Remote image (CDN / external):

    css

.box {
  background-image: url("https://example.com/bg.jpg");
}

Multiple background images

You can stack images (first one is on top):

css

.box {
  background-image: url("img/pattern.svg"), url("img/photo.jpg");
  background-position: top left, center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

Common gotchas (why it “doesn’t work”)

  • Wrong path: CSS file and image in different folders but path doesn’t use .. correctly.
  • Element has no size: a div with no content and no height won’t show the background. Give it height or padding.
  • Using background-image incorrectly with extra values instead of using background shorthand.

Correct:

css

.box {
  background-image: url("img/bg.jpg");
  background-repeat: no-repeat;
}

/* or */
.box {
  background: url("img/bg.jpg") no-repeat;
}

SEO-style notes for your post

  • Focus phrase: how to add background image in css appears naturally in headings and examples.
  • Short, scannable sections with code blocks and bullet points improve readability.
  • You can mention that modern tutorials (2023–2026) recommend background-size: cover for full-width hero backgrounds and “fixed” for simple parallax effects.

TL;DR: Use background-image: url("path/to/image.jpg"); on the element, then tweak background-size, background-position, and background-repeat (or use the background shorthand) to control how the image displays.

Information gathered from public forums or data available on the internet and portrayed here.