HOMEHTMLFLASHVisual BasicsPIVOTBINARYNETWORKDESIGN


Quick Jumps

Background Image

How to Save your Images

Image Tag

Center











"Smile For The Birdy"

Background Image

Instead of having a plain colour for your background you may choose to add more interest to your webpage by adding a background that has an image on it. There are many sites that allow you to downoad webpage backgrounds for free.

It is best to choose a webpage background as opposed to using a photo or picture that you have saved off the internet. When you use an ordinary picture it duplicates itself many times until the screen is full. Sometimes this can be overpowering and detracts from the information on your website. It really depends on what effect you are looking for, just experiment until you get it right. Just remember that if the image is smaller than the page, it repeats itself. This, of course, also applies to background images, however you can find an image that is not overpowering and does not detract from your written information.

The background tag is included in the body tag.

<body background="background.jpg">

You must put in the name of the image exactly as it has been saved. The image must be in your folder along with the .htm file. Backgrounds may be either a jpg or a gif file.

How to Save your Images

  • Right click on the link to the graphic
  • Select "Save link as" or "save target as" or "save picture as"
  • Choose the folder where you want to save the image into.
  • "Save"

    Please make sure that you always save your images into your folder.

    Image Tag


    This is the tag you must use to place an image onto your webpage.


    <img src="name of image.gif" />

    Make sure you put the name of the image exactly as you have saved it, including what file type it is. Either gif or jpg.

    Now let's say that you have saved your image into a second folder named "images" that is sitting inside your original website folder, in this case your image tag will look like this.


    <img src="images/name of image.gif" />

    Resizing Your Image

    When you want to resize your image add this coding to the tag.

    width="140" height="140"

    For our width and height I have used pixels to determine the size of the picture. All you need to do is change the number of pixles to adjust the size of the picture.

    <img src="name of image.jpg" width="140" height="140" />

    Center

    NB The center tag has now been deprecated, it will still work for basic html pages, however if you want to write web pages that will be read correctly and validate it may be best to use the division tag to center your pictures.




    <div align="center"><img src="images/ictntlogo.jpg" /></div>





    TOP  BACK   HOME   NEXT