Creating Seamless Backgrounds

When you need to combine images and HTML, one of the most useful tricks to have at your disposal is the background image. Applied to a table row or cell, the images will be tiled together to create a seamless image that sits behind the other objects on the page. But how to make the images so that they meet perfectly when tiled together? This tutorial leads you through the process of creating an image in Fireworks MX® that will fit together seamlessly as the backgrounds meet.

Click here for a preview of how the background will appear when you are finished.

1. Begin by creating a new Fireworks MX® document that is 100 pixels wide by 50 pixels high and a background color of #FFFF99.
   
   
2. To prepare the document, turn the rulers on by selecting VIEW/RULERS. Once the rulers are visible, click and hold inside the top ruler and drag down until the green GUIDE appears. Once you have it to the approximate center of the canvas, double click the Guide and set the pixel position to 25. Your document should appear as you see above.
   
3. To create a background, start by drawing a perfect circle on the canvas.The circle should be 50 X 50 and aligned to the left of your canvas. Use a color that contrasts with the background color so you can see it. Use the PROPERTIES MANAGER to set the circle to the exact size.
   
   
   When you draw an object hold down the shift key as you draw it and it will be a perfect circle or square.
   
   
4. Align the circle to the left and top of the canvas as shown above.
   
   
5. Create a clone of the circle. Make the circle active by selecting it with the SELECT TOOL. Then enter CTRL + SHIFT D on the keyboard. This will place an exact duplicate of the circle on top of the existing circle. If you look in the layers panel you will see the new circle has been added as shown above.
   
   
6. Using the ARROW KEYS on the keyboard or by dragging the second circle, move it so it lines up with the right hand side of the canvas and the bottom lines up with the top of the guide as shown above.
   
   
7. Create another CLONE of the ORIGINAL circle and move it BELOW the guideline and aligned to the right side of the canvas as shown above.
   
   
8. Now we need to use a color for the circles that is more complimentary to the yellow background. Select all of the circles by holding down the shift key while selecting each on. Select #FFFFCC from the color palette on the left side of the Fireworks MX® screen.
   
9. All of the circles change to the selected color.
   
   
10. Now we need to output the file to use as the background for our HTML page. Select GIF and 32 colors for the optimize output type as shown above.
    
11. Select FILE/EXPORT from the toolbar. Save the file to a location that you wish to use to add this image as a background to a web page.
    
12. Open Dreamweaver. Select FILE/NEW/BASIC.
    
13. Select MODIFY/PAGE PROPERTIES.
    
14. Navigate to the image you saved from the BACKGROUND IMAGE dialog box.
    
15. Select OK. Your background is now ready to go.
    

The background image can also be applied to tables.