Background Images in HTML

Background Images in HTML with Examples

In this article, I am going to discuss Background Images in HTML with Examples. Please read our previous article where we discussed Images in HTML with Examples. At the end of this article, you will learn everything about Background Images in HTML with Examples.

HTML Background Images

Almost every HTML element can have a background picture. To set the background of your HTML page, you can pass the path to an image as the value of the background attribute.

Background Image on a HTML element

We will use the HTML style tag inside the head and the CSS background-image property to add a background image to an HTML element.

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        .div_background {
            background-image: url(https://cdn.pixabay.com/photo/2015/10/30/20/13/boat-1014711_960_720.jpg);
            width: 500px;
            height: 340px;
            color:white;
            font-weight: 500;
            font-size: 28px;
            padding: 15px;
        }
    </style>
</head>

<body>
    <div class="div_background">
        This div has background
    </div>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

Background Image on a HTML element

HTML Background Image on a Page

You must specify the background image on the <body> element if you want to add a background image on the entire page.

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body {
            height: 100vh;
            background-image: url("https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_960_720.jpg");
            color:white;
            padding: 25px;
            background-position: center;
            background-size: cover;
            background-position: fixed;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <h3>This web page has Background</h3>
</body>

</html>

When you run the above HTML code, you will get the following output in the browser.

HTML Background Image on a Page

Background Repeat Image in HTML

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element. If we don’t want the image to repeat itself, we can change the background-repeat property to no-repeat.

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body{
            display: grid;
            place-items: center;
            height: 100vh;
        }
        div {
            border: 1px solid red;
            width: 800px;
            height: 500px;
            background-image: url("https://cdn.pixabay.com/photo/2019/05/26/22/43/puppies-4231472_960_720.jpg");
        }
    </style>
</head>

<body>
    <div>
        <h3>This web page has Background</h3>

    </div>
</body>

</html>

When you run the above HTML code, you will get the following output in the browser.

Background Repeat Image in HTML

As you can see in the example above the image is repeated to fill the element background.

Background No Repeat Image in HTML
<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body{
            display: grid;
            place-items: center;
            height: 100vh;
        }
        div {
            border: 1px solid red;
            width: 800px;
            height: 500px;
            background-image: url("https://cdn.pixabay.com/photo/2019/05/26/22/43/puppies-4231472_960_720.jpg");
            background-repeat:no-repeat ;
        }
    </style>
</head>

<body>
    <div>
        <h3>This web page has Background</h3>

    </div>
</body>

</html>

When you run the above HTML code, you will get the following output in the browser.

Background No Repeat Image in HTML

When we set the background-repeat value to no-repeat the image will not try to fill the empty area by repeating itself.

Background Cover Image in HTML

Set the background-size attribute to cover if you want the background image to cover the entire element. The image will stretch both horizontally and vertically to cover the entire screen.

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        div {
            width: 800px;
            height: 500px;
            background-image: url("https://cdn.pixabay.com/photo/2014/01/04/12/34/road-238458_960_720.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div>
        <h3>This web page has Background</h3>

    </div>
</body>

</html>

When you run the above HTML code, you will get the following output in the browser.

Background Cover Image in HTML

Background Stretch Image in HTML

If we want the background image to stretch to fit the full-screen width & height, we can set the value of background-size to 100% 100%.

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="robot.png">
    <title>Images</title>

    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }

        div {
            width: 800px;
            height: 500px;
            background-image: url("https://cdn.pixabay.com/photo/2014/01/04/12/34/road-238458_960_720.jpg");
            background-attachment:fixed;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div>
        <h3>This web page has stretched Background</h3>

    </div>
</body>
</html>

When you run the above HTML code, you will get the following output in the browser.

blank

Here, in this article, I try to explain Background Images in HTML with Examples and I hope you enjoy this Background Image in HTML with Examples article.

Leave a Reply

Your email address will not be published. Required fields are marked *