askvity

How Do You Put a Background Image on a Tag in HTML?

Published in HTML Background Image 5 mins read

The standard and most flexible way to put a background image on an HTML tag is by using Cascading Style Sheets (CSS), applied via the background-image property. While an older method existed using the background attribute directly within certain HTML tags like <body>, CSS is the modern and recommended approach for virtually any element.

1. Using CSS: The Standard Method for Any Tag

CSS allows you to apply styles, including background images, to any HTML element using selectors (like tag names, class names, or IDs). This provides much greater control over the image's appearance, positioning, and behavior compared to older HTML attributes.

How it Works

You define a style rule that targets the specific HTML tag you want to apply the background to. Within that rule, you use the background-image property and set its value to url('path/to/your/image.jpg').

Practical Examples

You can apply CSS in several ways:

  • Inline Styles (Not Recommended for Reusability): Add the style attribute directly to the HTML tag.

    <div style="background-image: url('images/my-background.png');">
    Content inside the div.
</div>

  • Internal Stylesheet: Place <style> tags within the <head> section of your HTML document.

    <!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<style>
  body { /* Applies to the entire page body */
    background-image: url('images/page-bg.jpg');
    background-repeat: no-repeat; /* Prevent image repeating */
    background-size: cover; /* Cover the entire element */
  }

  h2 { /* Applies to all <h2> tags */
    background-image: url('images/heading-underline.gif');
    background-repeat: repeat-x; /* Repeat horizontally */
  }

  #my-section { /* Applies to the element with id="my-section" */
    background-image: url('images/section-bg.png');
    padding: 20px;
  }

  .card { /* Applies to elements with class="card" */
    background-image: url('images/card-texture.jpg');
    padding: 15px;
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
    <h2>My Section Title</h2>
    <div id="my-section">
        <p>This is some content in a section.</p>
    </div>
    <div class="card">
        <h3>Card Title</h3>
        <p>Content inside the card.</p>
    </div>
</body>
</html>

  • External Stylesheet (Most Recommended): Create a separate .css file (e.g., styles.css) and link it in the <head> section using <link rel="stylesheet" href="styles.css">.

    In your styles.css file:

    body {
  background-image: url('images/page-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.card {
  background-image: url('images/card-texture.jpg');
  padding: 15px;
  border: 1px solid #ccc;
}

    In your HTML file:

    <!DOCTYPE html>
<html>
<head>
<title>Background Image Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <h3>Card Title</h3>
        <p>Content inside the card.</p>
    </div>
</body>
</html>

Key CSS Properties for Background Images

Beyond background-image, other useful properties include:

  • background-repeat: Controls if/how the image repeats (no-repeat, repeat-x, repeat-y, repeat).
  • background-size: Controls the size of the background image (auto, cover, contain, specific dimensions).
  • background-position: Controls the starting position of the image (top left, center center, percentages, pixels).
  • background-attachment: Controls whether the background scrolls with the content or is fixed (scroll, fixed, local).

These can often be combined into the shorthand background property.

2. Using the HTML background Attribute: An Older Method for <body>

Historically, and as mentioned in some older documentation (like the reference from 03-May-2023), it was possible to add a background image directly using the background attribute. However, this method is largely deprecated in modern HTML5 and is generally discouraged for most elements, except perhaps for backward compatibility with the <body> tag in very old contexts.

According to the reference provided:

"The easiest method to add a background image to a webpage is using the background attribute in the <body tag of HTML. This will add a background image to the whole page."

The syntax for this method, as described, is:

<body background="image_name.image_extension">

Where image_name is the name of the image file and image_extension is its format (e.g., .jpg, .png, .gif).

Using this attribute on the <body> tag applies the image as the background for the entire content area of the HTML document.

It is important to note: This background attribute is deprecated in HTML5. While it might still work in some browsers for the <body> tag for compatibility reasons, using CSS is the current standard and provides far more control and flexibility for styling any element, including the body background.

3. Method Comparison

Here's a quick comparison of the two approaches:

Feature CSS background-image Property HTML background Attribute (Deprecated)
Applies To Any HTML element (body, div, section, h1, etc.) Primarily <body> tag (historically)
Flexibility High (size, position, repeat, multiple images) Low (image path only)
Modern Standard Yes (Recommended) No (Deprecated in HTML5)
Control Full control via CSS properties Minimal control
Separation Separates content (HTML) from style (CSS) Mixes content and style

In summary, while an older HTML attribute existed for the <body> tag, using CSS with the background-image property is the standard, flexible, and recommended way to add background images to any HTML tag in modern web development.

Related Articles