HtmlHow-ToBeginner · 3 min read

How to Add Background Image in HTML: Simple Steps

To add a background image in HTML, use the background-image CSS property inside a style attribute or stylesheet. For example, style="background-image: url('image.jpg');" sets the image as the background of an element.

📐

Syntax

The background-image CSS property sets an image as the background of an HTML element. You provide the image URL inside url(''). This can be used inline with the style attribute or in a separate CSS file.

background-image: The CSS property to set the background image.
url('image.jpg'): The path or URL to the image file.

html

<div style="background-image: url('image.jpg'); width: 300px; height: 200px;"></div>

Output

A 300px by 200px empty box with the specified image as its background.

💻

Example

This example shows how to add a background image to the whole page using CSS inside a <style> tag. The image covers the entire background and stays fixed when scrolling.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Background Image Example</title>
  <style>
    body {
      background-image: url('https://via.placeholder.com/800x600.png?text=Background+Image');
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      margin: 0;
      height: 100vh;
    }
  </style>
</head>
<body>
</body>
</html>

Output

A full browser window showing a placeholder image as the background that covers the entire page and does not repeat.

⚠️

Common Pitfalls

Common mistakes when adding background images include:

Using incorrect or missing image URLs, causing no image to show.
Not setting background-size, which can make the image repeat or appear too small.
Forgetting to set element dimensions, so the background area is zero and image is invisible.
Using inline styles without quotes or with wrong syntax.

Always check the image path and use background-size: cover; to fill the area nicely.

html

/* Wrong way: missing quotes and no size */
div {
  background-image: url(image.jpg);
}

/* Right way: quotes and size set */
div {
  background-image: url('image.jpg');
  background-size: cover;
  width: 300px;
  height: 200px;
}

📊

Quick Reference

Here is a quick cheat sheet for background image CSS properties:

Property	Description	Example Value
background-image	Sets the background image	url('image.jpg')
background-size	Controls image size	cover, contain, 100px 200px
background-repeat	Repeats image or not	no-repeat, repeat-x, repeat-y
background-position	Position of image	center, top right, 50% 50%
background-attachment	Scroll behavior	scroll, fixed

✅

Key Takeaways

Use the CSS property background-image with url('path') to add a background image.

Set background-size to cover to make the image fill the area without repeating.

Always ensure the element has width and height so the background is visible.

Check your image URL carefully to avoid broken images.

Use background-repeat and background-position to control image display.