This chapter is from the book
This chapter is from the book
This chapter is from the book
Background/Foreground Gif Pairing
Although most lo-fi grunge layouts don't resize, there is a way to fill the entire screen by cleverly pairing foreground transparent gifs with tiling background gifs (Figure 04.06). How can Saksi make the horizontal stripe fill the entire browser window without knowing how large the window is? He could simply make the foreground image huge (1800x1200) so that it would safely fill most monitors. But an 1800x1200-pixel image takes a long time to load, even if 75 percent of it is only solid areas of color.
Figure 04.06. sueellen.org
Here is a foreground gif from the previous Sueellen page (Figure 04.07), and here is the page's tiling background gif (Figure 04.08). None of the page's foreground images extend beyond 600 pixels wide. Only the tiling background continues sideways. But because the background stripe is incorporated into the foreground design, it seems like one seamless, full-screen picture.
Figure 04.07. Foreground gif (the checkered area is transparent)
Figure 04.08. Tiling background gif
This technique is relatively simple to implement:
Design your layout in Photoshop, making sure to include a repeating horizontal element that you'd like to extend to the end of the browser window.
Isolate that repeating "stripe" element as a separate image. This will be your background image. Make it at least 20 pixels wide and 1500 pixels high so that your horizontal "stripe" doesn't unceremoniously reappear at the bottom of someone's gigantic monitor. Save this 20x1500-pixel image, and call it into your HTML via <body background="yourimage.gif">.
Save the rest of your foreground design, slicing it into chunks so that it loads faster. Save as transparent gifs any chunks of your foreground design that need to let the background show through.
Position these foreground design chunks over your tiling background (preferably using CSS layer positioning, although here Saksi uses tables).
That's it. You now have what appears to be a huge full-screen image, without the technical drawbacks of actually having a huge full-screen image.
This same tiling background hack can also be used to make vertically tiling stripes. Follow the same steps, except this time use a vertical stripe in your design, and then make your background gif 1800 pixels wide and at least 20 pixels high. Now your background image tiles down instead of sideways, causing full-screen vertical stripes.
Pairing foreground elements with tiling background elements is just one more way to get the browser to work for you instead of your always working against it, trying in vain to make it act like a printed page.