HTML is a useful tool to use if you want to add images to your web page. However, if you want to insert a background image in HTML, you need both HTML and CSS. In this article, know how to insert a background image in HTML.
HTML and CSS
HTML means Hypertext Markup Language. It is a code that commands the browser on which elements should be shown on a web page.
CSS, on the other hand, means Cascading Style Sheets, and it is used to make changes to the layout and appearance of a web page.
In order to insert a background image in HTML, you need a good background image to use for your page.
Setting Up the Files
- On your PC, create a folder with a name and make sure it’s easy to find later.
- Put the background image inside the folder.
- Create an HTML file. To do this, simply open a text editor and create a new file. Name the file “index.html”.
Writing the html file
- Copy the HTML code below:
background-image: url(” “);
2. Paste the code into the index.html file.
3. In the HTML file, find the line “background-image: url(” “);”. Then, type the image’s file name. Include the image’s file extension. After, save the HTML file.
Reviewing the html file
- Open the file in the web browser. To do this, simply right-click on the file and then select “Open with”. You can select any web browser of your preference.
- In the text editor, insert “Hello World!” between the two <body> tags.
- Reload the browser to see the text inserted on top of the background image.
Understanding the html code
- Understand the HTML code. The HTML code comes with open and closed tags.
- Every HTML page should start with <!DOCTYPE html>.
- The <title> tag appears on the title bar of the browser. It also appears on the browser tab.
- The <style> tag includes the CSS content.
- The <body> tag includes written texts.
understanding the css code
The CSS code that comes between the <style tag> commands the browser to add a background image to the body with a specific name.
Follow this guideline to successfully add a background image. With the right knowledge, it’s easy to learn how to insert a background image in HTML.