How to Set Image as Background in HTML Page

Are you unable to add a background image to HTML? For adding the background image, you should know certain tags and attributes. They help in easily adding images. Background images are an important part of a website. Sometimes they are used to give an overview of the website. If you are wondering, how to set image as background in HTML, keep reading.  You can even use div background image to add the image to a section of the document.

How to Set Image as Background in HTML

How to Set Image as Background in HTML

There was a time when only colors were used in the background. Background image makes the HTML page more attractive. But there are certain things you should keep in mind while adding the image.

  • The background image should be such that it doesn’t take away the focus from the content. As the content is more superior to the website.
  • Check if the image goes with the text and link colors on the page.
  • HTML background image size of the image is another important factor. If it is too big, it will take too long for loading it.
  • If there are more images on the page, the background image should go with them.

See More: How to Clear Cache in Chrome

HTML Background Image Full Screen

Before adding an image, you will have to create an HTML document. If you are a beginner, you might not know how to create one. Check the steps given below:

  • You should store the document in a separate folder. This keeps the document and images at one place. So it is easy for you to access them. Move to a location where you want to create the folder. Right-click on the window and select the new option. Once the “New” options list appears, select the “folder” option.
  • Now, copy and paste the background image into the new folder. Make sure the image is of high-resolution. This helps in perfectly loading all the versions. In case you do not have one, check online for background images.
  • Now, open a text editor on your system. In most cases Notepad is used, you can choose any editor. Select the “Make Plain Text” format if you are using “TextEdit”. Save the file with “.html” extension.

Also, check: How to Remove Password in Windows 10

Set Image as Background in HTML

  • First, open the file that you have saved with “.html” extension.
  • Write a simple HTML code with basic tags. In case, you do not know check the one given below.

Set Image as Background in HTML

  • If you have used the above code, look for the background image tag. Otherwise, add one to your document. You will find ‘background-image:url(“ “);’ in the editor.
  • The parenthesis is for adding the image location. If the image is located in the web page folder, add only the name of the image. Otherwise, copy and paste the complete location of the image.
  • Now, save the HTML file.
  • To check if the code is working, open the file with the browser.
  • Check the name and location of the image, if the image doesn’t appear.
  • The image would repeat itself vertically and horizontally in the background. To change the setting set the HTML background image no repeat.

Leave a Reply

Your email address will not be published. Required fields are marked *