Background image in HTML makes the page more attractive. Even for reading text, if the page has a background image it becomes more interesting. Html has specific tags and attributes for adding the image. Learn how to add image in background in HTML. You will be able to add background image HTML fit to screen after going through the article.
How to Add Image in Background in HTML
Earlier HTML background color was changed instead of images. For adding an image to a web page, you need HTML and CSS. HTML tells the browser what you want to show on the page. Cascading style sheets are used to change the layout and appearance of the page. First, you need to learn how to set up an HTML document.
- Create a folder on your system. This folder will hold your HTML file and the background image. Right-click anywhere on the screen. Select the “New” option to create a new folder. It would be better if you give a short name to the folder.
- Save the background image into the folder. Use a high-resolution image to ensure that the image loads perfectly on all versions. If you do not have a background image, search for one online.
- For creating the HTML file, you need a text editor. You can use any editor provided by Mac OS, Windows, TextEdit, and Notepad. In TextEdit, make sure you select the “Make Plain Text” option. Do not use Word processors as they add invisible characters that break the HTML file.
See More: How to Find IP Address
How to Insert Background Image in HTML using Notepad
- First, open the HTML file.
- Here, we have given a sample HTML code. You just need to copy and paste the code into your file.
- Once you paste the code, look for ‘background-image:url(“”);’ in the file.
- Now, add the name of the background image between the parentheses. For example- background-image: url(“image.jpg”). The web browser will look for the image in the web page folder. If the background image is stored somewhere else add complete path to the file. You can easily add HTML background image full screen.
- Once you are done, save the HTML file.
- Now, you need to check whether the image loads properly or not. Right-click on the HTML file and select open with option. Open the file with a browser of your choice.
- If the background image doesn’t appear, check the name of the image. You might have not correctly spelled the image’s name. You may see the HTML code itself instead of the image. In this case, check whether the document is saved in the correct format or not.
- You can even add text to the image. Type anything in between the body tag. When you reload the browser window, the text would appear on the image.
Also, check: How to Delete Songs on iPhone
Background Image HTML
HTML background image size can be set according to your wish. You need to specify the width and height of the image. If you are not sure about the size, set “Auto” value. The browser will automatically set the size of the background image. Add the background image for specific division by using div background image.