HTML - Background Images

HTML allows us to set background images for elements like div, span, table or for the entire page.

How to Set background Image?

You can use CSS background-image property to set background image for any HTML elements. Also you can use HTML background attribute to set the background of an HTML element or for the entire page. The background attribute is deprecated and it is recommended to use CSS Style Sheet for background setting. Following is the syntax to use background image with any HTML tag.

In HTML:

<tag background="URL/of/image">

In CSS:

tag {
    background-image: url('URL/of/image"');
    background-repeat: no-repeat;
}

Example

Following example show how to set a background image for webpages.

<!DOCTYPE html>
<html lang="en">

<head>
<style>
    div{
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
    }
</style>
</head>

<body background="/html/images/logo.png">
    <div>
        <h1>Welcome to My Website</h1>
        <p>
            This is an example of setting a 
            background image using HTML 
            attributes.
        </p>
    </div>
</body>

</html>

Background Repeat Property

Sometimes background image we set for an element will not be big enough to cover all the area of element. In this case image will repeat itself horizontally and vertically until it reaches the end of element. To avoid repeating of background image you can set background-repeat property to no-repeat

Example

Following example shows how to use background image repeat property. This explains how to use repeat, repeat-x and repeat-y properties in HTML.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Repeat Example</title>
<style>
    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        }

    div {
        width: 600px;
        height: 200px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('/html/images/logo.png'); 
    }

    .repeat-x {
        background-repeat: repeat-x;
    }

    .repeat-y {
        background-repeat: repeat-y;

    }

    .repeat {
        background-repeat: repeat;

    }
</style>
</head>

<body>
    <h2>Repeat-X</h2>
    <div class="repeat-x">
    </div>

    <h2>Repeat-Y</h2>
    <div class="repeat-y">
    </div>

    <h2>Repeat</h2>
    <div class="repeat">
    </div>
</body>

</html>

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover. By setting this the background image will cover all the element part without stretching it.

Example

The following example shows how to cover a image in an entire element area.

<!DOCTYPE html>
<html lang="en">

<head>
<style>
    .background-cover {
        background-image: url('/html/images/logo.png');
        /* Cover the entire container */
        background-size: cover; 
        /* Center the image */
        background-position: center; 
        background-repeat: no-repeat;
        width: 100%;
        height: 150px;
        color: white;
        text-shadow: 1px 1px 2px black;
        border: 2px solid #ccc;
    }
</style>
</head>

<body>
    <div class="background-cover">
        <h1>Welcome to My Website</h1>
    </div>
</body>
</html>

Background Stretch Property

By setting background-size property to 100%, you can stretch an image to fit into an element.

Example

Following example shows how to use stretch property.

<!DOCTYPE html>
<html lang="en">
<head>

<style>
    body {
        height: 100vh;
    }
    .background-stretch {
        background-image: url('/html/images/logo.png'); 
        /* Stretch the image to cover Div */
        background-size: 100% 100%;
        width: 80%;
        height: 80%;
        border: 2px solid;
    }
</style>
</head>

<body>
    <div class="background-stretch">
    </div>
</body>
</html>

Print Page