3 Replies Latest reply on Jun 12, 2012 8:17 PM by groove25

    How to export a rectangle with a bitmap background with Smart CSS?


      I am using smart css to export my fireworks design.


      I know I have to put rectangles around text and slices around bitmaps, to make sure Fireworks doesn't do "absolute positioning" when exporting.


      But what if you want a rectangle with a border AND a bitmap in the background of it? When I put a slice over the bitmap, Fireworks says the layers are overlapping (of course).

        • 1. Re: How to export a rectangle with a bitmap background with Smart CSS?
          groove25 Level 4

          I have to plead ignorance when it comes to Smart CSS; however, if you look at this tutorial, midway down there's a section called "Gradient and pattern fills". It seems to suggest that defining a slice will cause a pattern to be exported as a background image. By this logic, even if the image doesn't repeat, defining it as a slice would cause it to be exported as a background image.




          My apologies if this just repeats information you already know. (It sounds like you're describing a weakness in the system, where there's a conflict between defining a bitmap slice and the use of a border on the same rectangle?)


          Are you working in Fireworks CS3? The reason I ask is that the Smart CSS feature seems to have been created and promoted for CS3, and afterwards, there's no mention of it. I'm wondering if its features were simply "rolled into" versions CS4 and later.

          1 person found this helpful
          • 2. Re: How to export a rectangle with a bitmap background with Smart CSS?
            groove25 Level 4

            Aha! This updated version of that article indicates that Smart CSS became a standard feature in CS4, via the "CSS and Images" export option:




            There are some links at the end of the above article. Hopefully something there might be helpful to you.

            1 person found this helpful
            • 3. Re: How to export a rectangle with a bitmap background with Smart CSS?
              groove25 Level 4

              Incidentally, I had good luck following the instructions in the first "Smart CSS" article (using CS5 and CS6).


              One thing that I had missed on the first read-through is the importance of adding "_csspattern" to the end of a slice name if you wish to have it exported as a background image. I also found that it was necessary to avoid including the border within the slice boundaries; otherwise, the border will become part of the repeating background image.


              The hardest part, I think, is actually placing an image in the background of a rectangle in Fireworks. For something like a (non-repeating) banner image, my instinct is to use a vector mask to crop an existing bitmap. But masks don't seem to count as rectangles or div's in this system, as far as I can tell. But the solution to this is fairly straightforward: Create the rectangle first and then choose the Pattern fill option, applying the bitmap to the rectangle as a custom pattern (by choosing Other... at the bottom of the Pattern fill menu).


              Going through this process makes me wish I'd tried Adobe Muse while it was in its public beta period. I have to imagine it might offer a more intuitive interface for accomplishing this type of functionality than Fireworks does. But I still might spend more time with this aspect of FW in the near future.


              If none of this helps, please feel free to include a graphic to demonstrate what you're trying to accomplish.