HTML background image guide

Posted on Aug 14, 2021

How to use the background image style of HTML tags

Photo from Unsplash

A background image can be added to any specific HTML element of your choosing to add a unique spin to your webpage.

Before HTML5 was released, the HTML document supports adding the background attribute to any element. The attribute was deprecated in HTML5 because changing the background is the job of CSS and not HTML.

This tutorial will show you how to use the background-image CSS property to style your HTML document.

Adding a background image using URL

The background-image property accepts the url() value that can be used to add an image as a background for a specific HTML tag.

For example, here’s how to add an image.jpeg file (the image is downloaded from Unsplash) as the background image of the <body> tag:

<body style="background-image: url('./image.jpeg')">
</body>

The code above will produce the following output:

By default, the background image will repeat itself horizontally and vertically until it covers the entire element rendered on the browser.

To make the image fit the full screen size, you need to add two more properties to your CSS rule:

  • The background-repeat property must be set to no-repeat so that the image doesn’t repeat itself
  • The background-size property must be set to cover so that the image will cover the entire element size

The following CSS rule will do:

body {
  background-image: url("./image.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

The output will be as shown below:

The background image will be blurry when it has to stretch to fit the whole <body> tag. If you want a full screen background, make sure that the image’s original size is large enough to avoid blurry background.

I’d recommend a size of 1920 x 1080 so that the image looks good on a desktop computer.

You can add the background-image property to any HTML tag that you have inside your document.

Instead of styling the tag itself, it’s better to put the background image styling inside of a class. When you need the background image, you just need to add the class to the element:

.bg-tiger {
  background-image: url("./image.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
}

Now you can add the class to any HTML tag that you want to have a background image:

<body class="bg-tiger">
  <h1>Hello World!</h1>
  <h2>By Nathan</h2>
</body>

Keep in mind that adding a background image will affect the readability of your text. You may need to change the color of your text or add a <div> tag with a solid background color.

The following example uses a <div> tag to add a yellow background on top of the background image:

<body class="bg-tiger">
  <div style="text-align: center; background-color: yellow">
    <h1>Hello World!</h1>
    <h2>By Nathan</h2>
  </div>
</body>

The output will be as shown below:

You can also wrap your div at the center of the <body> tag by adding the width and margin properties as follows:

<body class="bg-tiger">
  <div
    style="
      text-align: center;
      background-color: yellow;
      width: 800px;
      margin: 0 auto;
    "
  >
    <h1>Hello World!</h1>
    <h2>By Nathan</h2>
  </div>
</body>

The output will be as follows:

Now you’ve learned how to add background images to HTML elements. Nice work 👍

Level up your programming skills

I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!

No spam. Unsubscribe anytime.