How do I add a Background to a Web Page?

First - save the background image to your computer: If you don't know or are unsure how to save a background image to your computer you can view the following tutorial for instructions: How do I save an image or background to my computer?


Next: Upload the background image to your website/server. Where you choose to upload the image on your server is up to you.


Using HTML or CSS code: Whether you use HTML or CSS code is entirely up to you. Either will work. However, CSS is more widely used. Once you've saved the background image to your computer and uploaded it to your server you can use one of the two following codes to add the background to a web page.


Creating HTML Code: When using HTML code to display a background on your web page you will put the path (URL) to the background image inside the <body> tag.

  <body background="http://www.yoursiteaddresshere.com/thebackgroundhere.gif">


* If you store images in a folder (sub-directory) on your server you would need to include the name of the folder in the HTML code inside the body tag:
  <body background="http://www.yoursiteaddresshere.com/folder/thebackgroundhere.gif">


Example: Let's say, for the sake of an example, that you've saved a background that is "cutebirdbackground.gif" and you've uploaded it to a folder on your server titled "images", the following is an example of the HTML code that would be used.

  <body background="http://www.yoursiteaddresshere.com/images/cutebirdbackground.gif">







Creating CSS Code: CSS code stands for "Cascading Style Sheet". CSS code goes between the <head> < /head> tags at the top of an HTML document. The CSS code used to display a background on a web page is similar to the HTML code above. The two biggest differences are that they are just different code, and the HTML code goes inside the body tag but the CSS code goes between the "head" tags in an HTML document.

  <style>body{background: url(http://www.yoursiteaddresshere.com/thebackgroundhere.gif) fixed;}</style>


* If you store images in a folder (sub-directory) on your server you would need to include the name of the folder in the CSS code:
  <style>body{background: url(http://www.yoursiteaddresshere.com/folder/thebackgroundhere.gif) fixed;}</style>


* "Fixed" after the background address in the CSS code just means the background will not scroll on the page, it will remain "still" as you scroll up or down on page. This is completely optional.


* Example of the CSS code between the "head" tags.
  <head> <style>body{background: url(http://www.yoursiteaddresshere.com/folder/thebackgroundhere.gif) fixed;}</style> </head>




Adding a background to a blog: Most blogs or other social media websites, such as Blogger or Twitter, allow you to customize your pages and provide you with the option to upload a background from your computer. I highly recommend you view their help sections to learn how to add a background. Due to the number of blogs services available today I can't possibly know how each one works. :)

If you have questions or need help with the codes above please feel free to email me: Contact Laura/MyCuteGraphics