How To Set Background Image For HTML Element Using CSS

Posted By Bajarangi soft , Posted On 30-10-2020

In CSS we can set background-image. The background-image property specifies an image to use as the background of an element.So today we discuss how to do it.

How To Set Background Image For HTML Element Using CSS

Create index.html file and implement as below code in it.

<h1>Hello World!</h1>

<p>We are setting background image for this page</p>

Complete Code For Setting The Color Of Text Using Cascading Style Sheets

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Background Image For HTML Element Using CSS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    body {
        background-image: url("nature.jpg");
    }
    .
</style>
<body>
<br/><br/>
<div class="container">
    <br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: black;"> Set Background Image For HTML Element Using CSS</h1>
    </div>
    <br>
    <div class="well">
        <h1>Hello World!</h1>
        <p>We are setting background image for this page</p>
    </div>
    <br>
</div>
</body>
</html>