You can add a background image in HTML using CSS , which is the modern and recommended way. Here are the main methods, plus a quick “copy‑paste” example.

Basic: Background on the whole page

Put this in a simple index.html file, and adjust the image path:

html

<!DOCTYPE html>
<html>
<head>
  <title>Background image example</title>
  <style>
    body {
      background-image: url("images/background.jpg");
      background-repeat: no-repeat;
      background-size: cover;      /* make image cover the screen */
      background-position: center; /* center the image */
      background-attachment: fixed;/* stays still on scroll (optional) */
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>This page has a background image.</p>
</body>
</html>

Key properties:

  • background-image: url("...") – path or URL to your image.
  • background-repeat: no-repeat – stops tiling the image.
  • background-size: cover – makes image fill the screen nicely.
  • background-position: center – centers the image.
  • background-attachment: fixed – background stays fixed while scrolling.

Method 1: Inline (quick, but not recommended for big projects)

Use the style attribute directly on an element:

html

<body style="
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
">
  ...
</body>

Good for tiny demos, not great for real sites because styles get messy fast.

Method 2: Internal CSS in <style> (common for small pages)

Inside the <head> of your HTML file:

html

<head>
  <style>
    body {
      background-image: url("bg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
    }
  </style>
</head>

You can also target a specific element:

html

<head>
  <style>
    .card {
      width: 300px;
      height: 200px;
      background-image: url("card-bg.png");
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>Card title</h2>
  </div>
</body>

Method 3: External CSS file (best practice)

  1. Create style.css:
css

/* style.css */
body {
  background-image: url("images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
  1. Link it in your HTML:
html

<head>
  <link rel="stylesheet" href="style.css">
</head>

This keeps your HTML clean and makes it easier to maintain styles in bigger projects.

Common issues (and quick fixes)

  • Image not showing?

    • Check the path:
      • If HTML and image are in the same folder: url('bg.jpg')
      • If image is in images folder: url('images/bg.jpg')
    • Make sure the file name and extension are correct (.jpg, .png, etc.).

  • Image repeats like tiles → add background-repeat: no-repeat;.

  • Image too small or cut off → try:

    • background-size: cover; (fill area, may crop), or
    • background-size: contain; (fit entire image, may leave empty space).

  • Want image only on a section, not whole page?

    html

    Welcome

Old HTML background attribute (avoid in modern code)

You might see this in very old tutorials:

html

<body background="bg.jpg">
  ...
</body>

It works in many browsers but is deprecated. Today we use CSS instead.

Mini “Quick Scoop” recap

  • Use CSS background-image on body or any element.
  • Prefer internal <style> or (best) external .css over inline styles.
  • Combine with background-size, background-repeat, background-position, and background-attachment to control how it looks.

If you tell me your exact setup (file names, folder structure, and what effect you want: fixed, full‑screen, section‑only, etc.), I can write a ready‑to‑paste snippet tailored to your case.