Basic Tips for HTML Codes for Including a Trendy Background

Tips For HTML Codes For Background
0 Flares Twitter 0 Facebook 0 Google+ 0 StumbleUpon 0 Pin It Share 0 0 Flares ×

Tips For HTML Codes For Background

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

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

body {

background-image: url(” “);

}

</style>

</head>

<body>

</body>

</html>

  • 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.

About author View all posts

Andrew Johnson

Andrew Johnson is founder of BestPSDtoHTML. He loves creative designs, photography, paintings and everything about innovation. As an Internet entrepreneur, he constantly tries to develop new ways to bring content faster and closer to the end users in a more streamlined way. His main focus lies in inspiring all the designers and developers with all new ideas through his blogs.

11 CommentsLeave a comment

  • Hey! I know this is kinda off topic however , I’d figured I’d ask.
    Would you be interested in trading links or maybe guest authoring a blog
    post or vice-versa? My blog goes over a lot of the same topics
    as yours and I think we could greatly benefit from each
    other. If you are interested feel free to send me an e-mail.
    I look forward to hearing from you! Terrific
    blog by the way!

     
  • I don’t know whether it’s just me or if everybody else
    experiencing issues with your website. It appears as though some of the text within your posts are running off the
    screen. Can somebody else please comment and let me know if this is happening to them
    too? This may be a problem with my internet browser because
    I’ve had this happen before. Appreciate it

     
  • I just like the helpful info you provide to your articles.
    I will bookmark your blog and test once more here regularly.
    I’m slightly sure I’ll be told plenty of new stuff right right here!
    Best of luck for the following!

     
  • I’m extremely inspired with your writing
    abilities as neatly as with the structure for your blog. Is this a paid
    theme or did you modify it your self? Either way stay
    up the excellent high quality writing, it’s rare to see a nice weblog like this one these days..

     
  • Everything is very open with a precise clarification of the issues.
    It was truly informative. Your site is very useful. Thanks for sharing!

     
  • I do not even know how I finished up right here, however I assumed this
    post was once good. I do not understand who you’re however certainly you’re
    going to a well-known blogger in the event you are not already.
    Cheers!

     
  • Thanks a bunch for sharing this with all folks you really
    recognise what you are talking approximately! Bookmarked.
    Kindly additionally seek advice from my website =). We could have a hyperlink alternate
    agreement between us

     

Leave a Reply

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