HTML codes are essential to add an image to a website, whether it is a background one or a simple one on the foreground. You can easily add an image to your website through HTML codes. Here is a complete guide of HTML codes that you can use it on your own blog or website.
You need to follow some simple points given below.
- Create a Folder
You will need to create a folder that will comprise of the background image you want to upload on the website along with other HTML files. You can name this folder but it is advisable that you give it a short, single word name.
- Move Image into the Folder
If you already have an image which you want to set as the background, then you can move it to the folder. Remember, images with light colours and a repetitive patterns look good on a website’s background otherwise the user will keep trying to figure out the image. You can also download an image and move it to the folder or directly download it into the folder.
- Create a File
After you have saved the image in the designated folder, you will need to create an HTML file. It is a simple process and can be done by following the steps given below.
- If you have Windows, then open Notepad and create a new file. Name the file as index.html. If you are using Mac OS X, then open text editor and follow the same step as given for Windows.
- The best text editor available for using HTML is Atom. You can download it for free from the internet and it is compatible with Windows, Mac OS X and Linux.
- If you cannot download Atom and want to stick to TextEdit, then you should click on the “Make Plain Text” option before you start typing anything. This option lets an HTML file upload properly into a website.
- MS Word is not compatible with HTML because the latter requires perfect coding and the former tends to add a few invisible characters itself which hinder the entire process.
Writing The Code
background-image: url(” “);
- Copy and paste the code written above in the file you created as index.html.
In the code you saved in the file, add the name of the background image which you want to upload on the website along with its extension between the parentheses provided after background-image: url(” “).
- This is why you make a separate folder for the file because the browser will look for the file in a particular folder. Otherwise you will need to provide the entire path of the image. You can save the file after you have completed the instructions above.
Now your background image is ready to be uploaded. If you find any errors while trying to upload the image, it may be because you did not name the file properly. Make sure you type the correct name of the image along with its extension. The entire file name should be between the parentheses and in the right line of the code. Problems also crop up when the coding is not right or unnecessary characters are added to it.
Remember, in HTML code or any other code, each character has a meaning and use. If you add unnecessary characters, the code will be useless and will not perform the desired function. A proper code, writing it and then executing the same is important. Without any of these, the upload cannot be complete. These basic steps must be followed thoroughly for a successful background image.