Một chiều rộng điểm ảnh cụ thể đã được thiết lập với div, theo sau là các thuộc tính nền (đó là nơi mà tất cả các hành động đã diễn ra. Chúng tôi sử dụng một giá trị hex là giống như là nền tảng của bộ phim Flash và cột bên phải, một địa chỉ mong muốn hình ảnh, cộng với một lệnh để trình duyệt để lặp lại hình ảnh theo chiều dọc (repeat-y) cho độ dài đầy đủ của div không lặp lại-y, . | Chapter 4 A specific pixel width was set with div followed by the background attribute which is where all the action took place. We use a hex value that is the same as the background of the Flash movie and the right column a url to the desired image plus an instruction to the browser to repeat the image vertically repeat-y for the complete length of the div. Without repeat-y the browser by default would have not only tiled the graphic vertically but horizontally as well. This would have caused the left edge of the graphic to appear again after the right edge of the shadow. This obviously wouldn t have worked with the design so repeat-y was used to tile the image in only one direction down . If your design required a horizontally tiled graphic you could use repeat-x. Because CSS allows you to apply both a hex color and an image to a single element you can with a little planning shave a few bytes from your file size by using CSS to draw areas of consistent color known as spot colors in the print world . This is the reason why the container s background image was cropped at the edge of the drop shadow. The remainder of the background the dark gray area the shadow bled into was drawn by the browser using the stipulated color value. While this method was not required all of it could have been included in the background GIF file a few bytes were saved by doing so. As we all know every little bit helps. When completed the div appeared as shown in Figure 4-7. Figure 4-7 The container div with background graphic applied and viewed in a Web browser. Extra notation has been added to illustrate which area is an image and which area is drawn by the browser. With the div background completed the Flash movie was placed above the container div and the two pieces snapped together perfectly as shown in Figure 4-8. Figure 4-8 Flash movie placed above container div from Figure 4-7 164 The PGA Championship Before moving on here s a tip to consider. Ensure that your design is nailed .
