1 Reply Latest reply on Jul 27, 2010 2:11 AM by Albertus Mus

    Background images

    Albertus Mus

      I'm developing an HTML/Air-based project using DW CS4 and Air2 on XP.
      I've used object.style.background-image to create simple animations in HTML before, but with Air I've been unable to dynamically build an object with a background image (the Air compiler skips over the code to be inserted).
      Changing the structure of the project, I now load a fully-featured CSS file with the HTML page. While the background image shows in DW's Design panel (the link clearly works), if I switch on Live View or run the Air project using the Preview button, no background images can be seen.
      The manual says Air follows CSS rules for background image, but am I missing something?

        • 1. Re: Background images
          Albertus Mus Level 1

           

          I'm not surprised that no-one has offered a solution: there are so many ways of doing this badly. After hours of browsing and headbanging, I found the solution.

          1 Check the link. This is the source of most CSS problems. Unlike javascript files which have paths relative to the HTML page they're running in, CSS paths are relative to the file's storage location. When you build CSS files in DreamWeaver you can browse to the image and the link is correctly inserted without quotes. DreamWeaver and IE showed the image, so that was OK.

          2 Check the source files. In this case I'm using PNG files, which have a header that can be used by programmers to hold application-specific information. Some applications require the header to strictly follow the rules. As this is a rewrite of a Delphi project, I knew that we had modified the headers so the image files were re-created. No change: DreamWeaver and IE showed the image, so that was OK.

          3 I finally came across the w3 css validation service (http://jigsaw.w3.org/css-validator/). I knew the CSS file was OK because DreamWeaver and IE showed me it was working, but things were getting desperate. It was at this point that I discovered I have collected more parts towards making me a complete idiot. This project has 15 pages and, for simplicity, resources have a prefix indicating the page they first appear on. I was using the image name as the CSS style name. Clearly, DreamWeaver and IE have a more relaxed attitude than Air or Firefox as beginning a style name with a numeral is against the rules unless the numeral is preceded by a \ escape character.

          Simple, really.