In this tutorial, you will know how to add a background image in HTML. You will use the CSS background-image property. There are many methods to add a background image in HTML. Let’s know all of them.
Methods to Add a Background Image in Html
Method 1: Using the inline style attribute
Inline style means putting the css property with the tag only. You can add the background image using the below inline style attribute.
<body style="background-image: url('path/to/image.jpg');">Method 2: Using an internal style sheet
To use an internal style sheet you will call the style tag inside the head tag. It will add the background image to the body of the page.
<head>
<style>
body {
background-image: url('path/to/image.jpg');
}
</style>
</head>
<body>
<!-- content here -->
</body>Method 3: Using an external style sheet
Here you will create a separate CSS File and link it to HTML File using the link element in the head section.
First, create a CSS file.
body {
background-image: url('path/to/image.jpg');
}Then the HTML document with the link to the CSS file is in the head section.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- content here -->
</body>Sample Code
<head>
<style>
body {
background-image: url('https://plus.unsplash.com/premium_photo-1661266884360-028764df3128?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1172&q=80');
}
</style>
</head>
<body>
<!-- content here -->
</body>Output
Conclusion
These are the methods to put a Background Image in Html. You have learned three methods. One is using inline CSS, the second is internal CSS and the third is an external stylesheet. All methods are using a background-image attribute.
