Using background image slices

To support the CSS Export feature, Fireworks CS4 added the Background Image slice type—a fantastic enhancement. At its most basic, it provides the opportunity to slice sections of a design and export them as the background image of an empty div. However, its potential really shines when its background-repeat and background-position properties are used to create a tiling background of a div.

With this feature, seeing really is believing, so let's get straight to it:

1. Create a new 500 × 500 document.
2. Draw a 200 × 40 rectangle.
3. Set the background color as #000099.
4. Set its fill to be a Linear gradient.
5. Change the first Gradient node's color to #9999FF.
6. Select Edit > Insert > Rectangular Slice.

7. Change the following properties In the Property Inspector:

   • Name: bg_rect
   • Width: 1px
   • Type: Background Image
   • Repeat: repeat-x
   • Horizontal position: left
   • Vertical position: top
8. Using the Optimize panel, set the slice's export format to GIF - Exact.
9. Export as bg_slice.htm using CSS and Images.
10. Locate the file and preview it in your primary browser.

What you see is a perfect representation of what you had in Fireworks, all produced from a single 1px background slice.

How could you use this technique for a real-world purpose? You could create the background of a div that includes other content, such as for a navigation bar or block-level heading:

1. Add a 1px black outside border to the rectangle.
2. Add some white Arial – Bold, 20px point-text and align it vertically to the middle.
3. Re-export and preview in your browser.

4. Increase your browser's text size by at least two stops to see the result (see Figure 9). Firefox users can select View > Text Size > Increase, while IE users can select View > Text Size > Largest.

   

   Figure 9. Adding text and a border to produce a standard application of a repeating background

This simple exercise demonstrates the power of the CSS Export feature and its goal of creating accessible, standards-compliant pages. As all of the font sizes are specified in percentages, it allows them to scale in every browser. This is crucial for improving the accessibility of any site.

You'll also notice that even where the background image stops, it still blends with the rest of the box. This is because the solid background color of the rectangle was set in Step 3. It is important to realize that even if an object has a gradient fill, its original solid color is still remembered. We utilized this in this enhanced version of the CSS Export.

If you return to Fireworks and change the rectangle to show a solid pink fill, apply a linear black-to-yellow gradient, and then re-export it, you would get a result like Figure 10. Additionally, the background slice type works in an identical manner with a horizontal gradient, repeating on the y axis.

Figure 10. Unexpected results produced by having an incorrect solid color set

Using the 3-slice technique

A common element of web design is to show a panel that has a static top, a middle section for any amount of content, and a static bottom (see Figure 11). The CSS Export caters to this requirement by using the background image slice type, and what Fireworks calls the "3-slice technique."

Figure 11. A common, flexible box requirement

By placing three background slices (one for the top, a repeating one for the middle, and one for the bottom) over the top of a rectangle, rounded rectangle autoshape, or path, the CSS Export feature automatically realizes what you're trying to achieve and produces the relevant markup using the 3-slice method. Consider the slice setup in Figure 12. You could also do it by including a heading where the top slice would be.

Figure 12. Setting up the slices to create the 3-slice (top) and adding heading text underneath the top slice (bottom)

If you were to add the text to the image, the top slice would need to be exported again separately without the text visible and would also need its height extending to cater for text resizing (see Figure 13).

Figure 13. Text applied to the background image, as well as created as normal text (top slice needs to be extended to cater for larger content)

Page 3 of 4

Previous Page

Next Page