To add a background image in HTML, the modern and recommended way is to use
CSS with the background-image property. This can be applied directly on the
<body> tag or any other HTML element.
How to Add Background Image Using CSS in HTML
You can add a background image in an HTML file in the following way:
- Inline CSS in the
<body>tag:
html
<body style="background-image: url('image-url.jpg');">
<!-- page content -->
</body>
- Using a
<style>block inside the<head>to apply background image to the entire page:
html
<head>
<style>
body {
background-image: url('image-url.jpg');
background-repeat: no-repeat; /* prevent the image from repeating */
background-size: cover; /* cover entire area */
}
</style>
</head>
- Adding background image to specific elements similarly:
html
<div style="background-image: url('image-url.jpg'); width: 400px; height: 300px;">
<!-- content -->
</div>
Important Notes
- The old HTML attribute
<body background="image-url">is deprecated and should not be used. - You can control repetition with
background-repeatproperty (repeatorno-repeat). - For covering the entire area nicely, use
background-size: cover. - You can add the image by URL or local image path.
This method enhances the visual appeal and is the standard way for background images in HTML using CSS.
