Creating a repeating pattern or bar with a separate element centered in the browser window.

The purpose of this tutorial is to allow you to create an element that will continue across the browser window no matter how big, while keeping a central element in the center.

  1. Start in Photoshop.Open a new document window that is as tall as you want but only 1 pixel wide. This will be repeated across the screen to create your foundation background color. Save for Web as a GIF. In this case I saved it as bckground.gif



  2. Create a new document in Photoshop with the same height as the previous image (make sure Background Contents are set to Transparent). Here's your chance to be creative. I'm going to use the gradient tool to get this nice sunrise feel. Save. This time I'll save as a PNG-24 since I have both gradient and transparent elements. This I'll save as rising_sun.png



  3. Open your html document in Dreamweaver. Click the New CSS Rule button and select tag and specify body. If you don't have a style sheet linked already it will ask you to save one. Browse to select your background image and select repeat-x in the Repeat Menu.



    Also in the Box tab change top margin to 0 pixels. This should override the default 10 pixel margin around the body.



    Notice that it placed the attribute in the Head.



  4. In the body write the code highlighted:



    5. The end result should look like this: