Fit browser width

Question

I have a project that I'm looking to have the background (about 300px tall) span the whole width of the browser. The background color is changing for each different page otherwise I would do it in HTML. I have the background larger than the artboard but it still doesn't show up. Is there a way to do this?
Thanks in advance!

Answer 1

There are a few ways to do this that involve writing a little bit of code, but unfortunately I don't think there's any way to do it purely within Catalyst.
One option is to write a bit of code that calls out to JavaScript and upates the HTML page's background whenever your application's state changes.  You'd add a currentStateChange listener to your root s:Application tag, then use ExternalInterface to call your JavaScript code.
Another option is to convert the fixed-size application generated by Catalyst into a resizable one, with your fixed-size layout floating in the center and the background filling 100% of the width.  You can do that as follows:
Import the project into Flash Builder
In the Main.mxml file, wrap your outermost fx:DesignLayer tag in an s:Group tag
Set verticalCenter="0" on the group to center it
Copy the width and height from the root s:Application tag onto the group
On the application tag, change both width & height to 100%
Setup your background color variations by adding attributes to the application tag: backgroundColor.Page1="#FF0000" will make the background red in the "Page1" state, for example.  Be sure you use the exact state name after the dot (copy/paste from the <s:states> section if you want to be sure).
Hope that helps!
- Peter