how to add background image in html

just now 1

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-repeat property (repeat or no-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.