How to make a background image in HTML?

The <img> tag allows you to embed images in your web pages. Images are linked to web pages, not inserted into them. The <img> tag creates a holding space for the referenced image, which is specified by its src attribute.

To add an image in HTML, you can use the <img> tag, include a source and alt attribute, and place it inside the body section of your HTML file.

The syntax for <img> tag looks like this: <img src="URL" alt="descriptive text">

The HTML image element is empty and does not require a closing tag. Unlike elements like the paragraph that need both an opening and a closing tag, an image specifies its content through attribute tags in its opening tag.

In previous versions of HTML, the background-image attribute was used to set a website's background image. However, the CSS background property is more flexible and predictable. If you want to display an image on a web page or in an HTML element but not have it be part of the content, you can use the CSS background-image property.

When setting the value of background-image with CSS, you will use this syntax: url('') and include the image URL or file path between the single quotation marks.

To set the background image of a page, use a CSS selector to define the property in the head section of your HTML file. For instance, you want to set an image as the entire page's background. In this case, you need to apply CSS to the body element.

The CSS would look like this:

body {
    background-image: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
    color: #FFFFFF;
}

The HTML would look like this:

<h2>Background Image</h2>
<p>The background image is specified in the body element.</p>