Background Tutorial:
How to Design a Vertical Background in Fireworks
The tutorial for the vertical background image described below is the same vertical background as you see on the lower portion of this page (this website is now using another background so I only placed it on part of this page).
Width of Vertical Background ImageThe vertical background on this page was made from an image 760 pixels in width and 5 pixels high and filled with the preferred color. This background is designed for 800x600 resolution but it needs to be 40 pixels less the resolution width so the scroll bar on right side of browser will not cover it up.This background was designed to scroll vertically only. If it was allowed to scroll horizontally the page would be 1600 pixels in width and you would have to scroll to the right to read each line of text. |
Applying a Vertical Background Design to Each End of the ImageFollowing is a sample of the vertical background image in a shortened version so you can see how it is designed (it has a border applied so you can see it on the same colored background of this page):
Applying "Noise" to Each End of the Background ImageA design was applied about 8 pixels from each end of the line by applying the noise feature in Fireworks (Xtras / Photooptics / CSI noise). This same noise feature can be applied in Photoshop by using Filter and then Noise. I played around with the noise feature until I found a design I liked.Here is the end of the background image enlarged so you can see how the vertical background design was made that appears to be tiny rings in a binder (this image also has a border applied so it will show up on the current background):
Applying a Design by Hand to the ImageIf you enlarge the image big enough you can manipulate the image by hand by replacing the color of pixels one by one using the eye dropper tool to pick up the right color and the pencil tool to copy it to another pixel.You can also apply a brush stoke to the end of the image or make it deeper and add a small graphic on both ends. Applying a 3 dimensional look to the ImageThis design was then given a 3 dimensional look by putting two lines of varying shades of darker gray/purple inside each "noised" portion.
Setting up the Vertical Background in CSSHere is how this background is set up in the CSS file under the body section:background: #d6d7dc; The above code provides the same color background for resolutions above 800x600 where the background extends beyond the main portion of the page (if you open this page in 1024x748 resolution you can see what I mean, except the background has been changed sinde this background tile was designed).background-repeat: repeat-y; The above tells the computer to repeat the background only vertically (otherwise the page would multiply horizontally and be too wide).background-image: url(images/backgrnd5.gif); The above provides the path to the background image. if you click on this link it will bring up the background image in another window (it's only 5 pixels high so barely distinguishable at top of page).Here is how to set this up in the HTML body tag however with this method you cannot also apply a background color that spreads beyond the image in higher resolutions: <body background="images/ImageNameGoesHere.gif"> If this Tutorial didn't solve your problem send an email to and maybe I can tell what you are doing wrong. Lori Eldridge Copyright © 10-28-04 - updated 12-05-05 All Rights Reserved.
Return to the: |
