how to add background image in css

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.