Exit tutorial
 Web Design - Stage 2: Using a Background Image |
| How To Add A Background Image To Your Page |
|
To add a background image to your page, you will need to locate the <BODY> tag in your document. When you have found it, you may see just the word BODY, or you may see a string of commands afterward. It may look something like this: <BODY bgcolor="#FFFFFF" text="#000000"> What we are going to do is add a command after the word BODY. So, go to the end of the word BODY, skip a space, and type the following: background=" " Now your body tag should look something like this (and may have more commands): <BODY background=" "> Now, we are going to place the url of the image inside the quotation marks. So, if the image I want to use is at http://www.mysite.com/image1.gif , I would insert this into the command, like this: <BODY background="http://www.mysite.com/image1.gif"> Your image should have the file extension .gif or .jpg . If not, you will want to covert it to one of these file types, using a graphics program such as Photoshop or Fireworks. Now, if your image file is located in the same directory as your html file, you can just type the filename of the image rather than the full url. So, if we want image2.gif to be the background image, and it is in the same directory as the page we are editing, we can type the command this way: <BODY background="image2.gif"> Now, as a real example, I will use an image from my server as a background on a page. The name of the image is "next.jpg". The url for the image is http://www.mysite.com/images/next.jpg . So, to use this as a background, I would type in this: <BODY background="http://www.mysite.com/images/next.jpg"> Now, if I put an html file in my "images" directory, I could use the image by typing in just the filename, like this: <BODY background="next.jpg"> Okay, now you can use your own image as a background....so put a picture of yourself as a background. That's always kind of fun......
|
|