• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

GoLive Basics > Image Inflation

Image Inflation

Although a background saved as a JPEG or GIF may be only 10 K, it will be decompressed to full size in the browser. This can amount to 1MB, 2MB, or more. This was an issue in the dawn of Web design because some designers wanted to use large (and dimmed) background images. Since a background image is repeated on the horizontal and vertical axis, the designer had to extend the background image down and to the left and fill it with a background color so that users with large screens wouldn’t see the background pattern repeat. Luckily, there is a better solution that uses Cascading Style Sheets.

  • In Photoshop, create a background with a maximum width of 600 pixels and select a color from the Web color table (to avoid dithering) to fill the rest of the image on the right side. Use the Airbrush tool to blend the image with the background color if necessary (in this example I just used a gradient fill to illustrate the principle). Save the finished background as a GIF or JPEG.

  • To create a Cascading Style Sheet, in the Layout Editor, click the Open CSS Editor button in the upper-right corner of a document (the icon looks like a staircase) to access the CSS window.

  • In the CSS toolbar, click the New Element Style(<>) button. In the Basic tab of the Inspector, type BODY in the name field. (What we are basically doing is overwriting the HTML BODY tag.)

  • Switch to the Background tab, check the Image box, and then browse for the background image. Choose “Repeat x” from the Repeat pop-up menu to repeat the background horizontally or “Repeat y” to repeat it vertically. It’s even possible to have the background repeated only once or to have the background stay at a fixed position by selecting Fixed from the Attach pop-up menu (however, this causes the background to be rendered black in older versions of Navigator, so I don’t recommend using it). After you have saved this document, open it in Navigator or Explorer to see the effect.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint