Background Graphic Exercise

In this exercise you will apply various background graphics to the body tag of this site. The first three graphic images are supplied, and then you must obtain your own. You may create you own repeatable graphic image in Fireworks, OR obtain a tileable image from http://tileabl.es (or another source). The CSS code is on a PDF or Word document attached to the assignment on Blackboard.

Experiment with various repetitions and graphics.

  1. Download the attached folder and decompress.
  2. Open the html file in a text editor or Adobe Dreamweaver.
  3. Look at the body tag - review the code and how a graphic is applied.
  4. View the html file in browser. Notice how the image is repeated. Note that the paisley graphic is a seamless tiled image.
  5. Go back to the code editor (text or DW).
  6. Change the graphic to the fire.jpg (you can copy the image file name, then paste it into the code) and view in browser.
    This image is NOT a seamless tiled image - note the visual difference.
  7. Go back to the code editor (text or DW).
  8. Change the graphic to the gradient.jpg image and change the repeat value to (repeat-x) and view in the browser. Note the visual difference.
  9. Now you must obtain and apply your own background graphic image. You may make your own in Fireworks OR download a seamless tile image from another source. The new image must be in the exercise folder. Apply the graphic to the CSS code and view in a browser.
  10. Zip compress this folder and attach to this assignment for submission