Did you know that people only remember 20% of what they read, but not 80% of what they see? Because people can learn and process information visually, It is important to use images. Now you need to learn how to use the HTML background IMG code. (Pun intended.)
Today I'm going to explain everything you need to know about adding images (or background images) to your HTML. Learn how to use HTML background IMG codes and why images are required. Why should I use images on my website?
His 65% of the population are visual learners. If you don't use images on your website, you're not providing content that appeals to the majority of people.
Images help make your content more informative, engaging, and memorable. There is also the aspect of ease of digestion. Adding images like infographics can make dense content easier to understand. Not only does it provide a better user experience, but it also helps increase organic search traffic.
How to add images using a site building platform
If you're using a website building platform like Content Hub or WordPress, simply click the image icon in the toolbar, select the image from your file manager, and paste it. This process is easy and takes less than a few minutes. Tools like Content Hub enable drag-and-drop creation, so no HTML knowledge is required.
However, you can still add images to your website even if you don't use the builder. However, you must use HTML to do this. Let me explain this process.
o Insert the image in your HTML, use the image tag, and include source and alt attributes. Add images to the body of your HTML file like any other HTML element.
The syntax is: src="URL" alt="description">
HTML image elements are "empty elements". That is, there is no closing tag. Unlike elements such as paragraphs, which contain content between the start and end tags, images specify their content through attributes in the start tag.
Now take a look at these lines of code to see the difference between a paragraph and an image.
How to insert a background image in HTML
If you want to set an image as the background of a web page or HTML element, rather than simply inserting the image into the page, you should use the CSS background-image property. This property allows you to specify a background image to display on your website.
This CSS property replaced the background-image attribute in previous HTML versions. They are much more flexible and predictable than HTML attributes, yet easier to use. Therefore, we recommend using CSS instead of traditional HTML background IMG code.
To set the background image value, you must use the following syntax:
<img src=“https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg” alt=“an artist's rendition of a black hole in space”>
Enter the image URL or file path between single quotes.
How to insert a background image on a page
Suppose you want to set an image as the background for the entire page. In this case, apply CSS to the body element. You can use CSS selectors to define background image properties in the header of your HTML file or external style sheet.
This demo shows how to do this using the same image as above. Also change the text color to white for better visibility.