html

How to Add a Background Image in HTML

2 years ago
by Adnan Shabbir
While creating a website or writing a blog post, images play a vital role in making things more attractive and understandable. Without images, whether a blog or a website, it becomes dull and readers start losing interest. Background images also have a pragmatic impact on the interactivity of the web page.

This article provides a detailed guide to add a background image in HTML. Additionally, this article serves the following outcomes regarding:

How to add a background image in Html

In HTML, we can add a background image by using the CSS property background-image. A background image is used as wallpaper on a website or as a cover image for a slider. The syntax of the “background-image” property is written below:

background-image: url(‘image name’);

The above syntax is a CSS property and can be used in an external stylesheet, internal CSS, or inline CSS.

Example

For a better understanding, the following HTML code is practiced to add a  background image in HTML.

<head>
     <style>
          .container{
               height: 200px;
               width: 300px;
               color: ghostwhite;
          }
          .center{
               text-align: center;
          }
     </style>
     <title>Image</title>
</head>
<body>
     <div class="container">
          <h1 class="center" style="background-image: url('f.jpg');">This is an image</h1>
     </div>
</body>

In this example, we use the background-image property in the <h1> tag to add a background image.

Output 

The output shows that in Html a background image can be added using CSS property.

How to add a background image to a tag in HTML

We can also add background image in a paragraph by using internal, inline or external CSS. We can use the background image to a paragraph to create different designs.

Example

<body>
     <div class="container">
          <h1 style="text-align: center;">Paragraph  background</h1>
          <p class="center" style="background-image: url('bb.jpg');">This paragraph is written in order to demonstrate the use of background image with paragraph.
               This paragraph is written in order to demonstrate the use of background image with paragraph. This paragraph is written in order to demonstrate the use of background image with paragraph.
               This paragraph is written in order to demonstrate the use of background image with paragraph. This paragraph is written in order to demonstrate the use of background image with paragraph.
          </p>
     </div>
</body>

In this example we use a background image to change the background of the paragraph.

Output

The output shows that we add a background image to a paragraph by using the background-image property.

How to add a background image of the web-page in HTML

Usually the background of a web page is white but we can also change the background of a web page using background-image property to HTML’s <body> tag.  background-image.

Example

<head>
     <title>CSS Classes</title>
     <style>
          .center{
               text-align: center;
               color: ghostwhite;
          }
          body{
               background-image: url('f.jpg');
          }
     </style>
</head>
<body>
     <div class="container">
          <h1 class="center">Body Background</h1>
          <p class="center">
               While creating a website or writing a blog post, images play a vital role in making things more attractive and understandable. Without images, whether a blog or a website, it becomes dull and readers start losing interest.
          </p>
     </div>
</body>

In this example we change the background of a web page by adding a background image to HTMLbody.

Output

This output shows that the background-image property has set the image to the whole page.

How to avoid Background Image Repeating

When we add background on a web page, image repeat itself in order to cover the whole page as show below:

So to avoid image repetition we use CSS property background-repeat and set its value to no-repeat as shown in the following output:

Example

<head>
     <title>CSS Classes</title>
     <style>
          body
          {
          background-image: url('ff.png');
          background-repeat: no-repeat;
          }
     </style>
</head>
<body>
     <!--some content-->
</body>

In this example we remove the image repetition with the help of background-repeat CSS property.

Output 

The output shows that after using background-repeat:no-repeat; property images come to their original size and leave the rest of the page empty.

How to cover the whole background with no repetition

The  background-size and background-attachment properties can be used to set an image to the whole background. To do so, you need to use the cover and fixed values of background-size and background-attachment properties.

Example 

<head>
     <title>CSS Classes</title>
     <style>
          body
          {
          background-image: url('f.jpg');
          background-size: cover;
          background-repeat: no-repeat;
          background-attachment: fixed;
          }
     </style>
</head>
<body>
     <!--some content-->
</body>

In this example we have used the background-size:cover to add a background image to the whole web page without repetition. And the background-attachment:fixed property removes the scrolling effect.

Output

The above output shows that the background-size property covers the whole web page but it remains scrollable so to remove the scrolling effect we used the background-attachment property.

How to stretch background image in HTML

You can stretch the background image to avoid the repetition of an image. To do so, the background-size and background-attachment CSS properties.

Example

<head>
    <title>CSS Classes</title>
    <style>
        body
        {
        background-image: url('f.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-attachment: fixed;
}
    </style>
</head>
<body>
    <!--some content-->
</body>

In this example we have used the background-size:100% 100%. The first 100 refers to the width and second 100 identifies the height which eventually stretches the image. While background-attachment:fixed

Output 

The above output shows the background-size property to stretch the image but it remains scrollable so to remove the scrolling effect we used the background-attachment property.

Conclusion

In HTML, background-image property is used to add a background image . This article aims to add a background image in HTML. The background image can be added to a single HTML element or the whole web-page. Furtherly, the background image can be customized by using various CSS properties such as background-size, background-attachment, or background-repeat properties. We have also provided an insight into using these properties to manipulate background-image. background image.

About the author

Adnan Shabbir

View all posts