How To Use Background Images in HTML

Having images in your HTML page or file especially in the background, can greatly enhance the whole point of your file. It can drive the theme of your content faster with just one look at the site. Images are easy to incorporate in your background – whether it is a single image centered on the page or multiple tiled images. You can also have an image fill up the whole background. All of these options are completely up to you and you have the steps outlined below on how to achieve them.

Materials that you will need:

  • Desktop or laptop computer
  • An existing HTML page
  • Basic HTML commands

  • Getting to the body. The first thing you need to do is to find the body of the file by looking for the body tag, written as <body>. If there is no body tag then you can just key it in immediately after the </head> tag. This is the section that will contain all items and commands for the formatting of the body of the HTML page.
  • Incorporating the background. After you have written the tag for the body, key in a single space and then type <body background> tag. After this, you can follow it with the equal sign. Remember that there should be no spaces between keyed in commands.
  • Importing the image. The image that you will be using for the website can be in a folder directory or in a web URL. If you think you will need to change the background image automatically (meaning, without the need to upload new files for the HTML site) then it is best to place your image in a web service so that all you need to do is change the image from this URL without manually changing the location from the HTML file. Otherwise, you can just place your image in the same folder as where the HTML file is and point to that location when importing the image. So your background image tag will look like this: <body background=”your web URL here”>.
  • Checking your HTML file in your browser. Once you have done this, save the changes that you have made (whether you are making this in notepad and saving as an HTML file or any other way) and launch your HTML page in your machine browser, to check if you got the desired effect. You can have a bigger resolution and image size for your background image changed if you think it is too small for your screen. You do not need to immediately make your HTML page go live by uploading it to an FTP site.

There are a number of things that you can upload aside from static images. Animated GIFs are also great additions to a page. This background can be a picture or a pattern that you want to serve as the wallpaper of your site. You can also include margins and other formatting settings to your background to better fit the content that will be placed on top of it. Have fun and good luck!


Share this article!

Follow us!

Find more helpful articles: