How to Add Background Image in HTML?

You can add a background image to your HTML page or any HTML element using CSS. This is the modern and recommended method, replacing the older (now deprecated) background attribute in the <body> tag.

Using CSS background-image Property

1. Add Background to the Entire Page

To set a background image for the whole web page, target the <body> element with CSS:

<!DOCTYPE html>
<html>
<head>
    <title>Background Image Example</title>
    <style>
        body {
            background-image: url('your-image.jpg');
            background-repeat: no-repeat;
            background-size: cover; /* Make image cover the entire page */
            background-position: center; /* Center the image */
            background-color: #f0f0f0; /* Fallback color */
      }
  </style>
</head>
<body>
    <h1>Welcome!</h1>
    <p>This page has a background image.</p>
</body>
</html>

Where –

background-image: URL of your image.
background-repeat: Controls repetition (default: repeat; use no-repeat to avoid tiling).
background-size: cover: Scales the image to cover the entire background.
background-position: center: Centers the background image.
background-color: Sets a fallback color.

2. Add Background Image to a Specific Element

You can apply a background image to any HTML element, such as a <div>:

<div style="background-image: url('your-image.jpg'); height: 300px; width: 500px;">
    <!-- Your content here -->
</div>

Or, better, use a CSS class:

<style>
    .bg-section {
        background-image: url('your-image.jpg');
        background-size: cover;
        background-position: center;
        height: 300px;
        width: 500px;
    }
</style>
<div class="bg-section">
    <!-- Your content -->
</div>

3. Methods of Applying CSS

You can use CSS for background images in several ways:

Inline within an HTML element using the style attribute.
Internal styles inside a <style> tag in the HTML <head>.
External CSS file linked to your HTML document (recommended for larger projects).

Best Practices

Always include a fallback background-color.
Use background-size: cover for full coverage; use contain to make the image entirely visible.
Use high-resolution images optimized for the web to avoid slow loading.
For accessibility, ensure text is readable over the background. Use overlays or adjust text color if needed.

Deprecated Method (Not Recommended)

The HTML background attribute for the <body> tag is outdated and should be avoided:

<body background="your-image.jpg">
  <!-- Content -->
</body>

Use CSS instead, as modern browsers and HTML5 standards no longer support this attribute.

With CSS, you can easily control how your background image appears and adapts to different devices, ensuring a visually appealing and flexible design.