Backgrounds

From FHTML

In addition to standard html background syntax, FluidHtml supports some special methods of specifying backgrounds.

1 What's the same as html?

1.1 background

• The background (shortcut) property lets you specify the following properties in any order: background-color, background-image, background-repeat, background-attachment and background-position.
• (Note that FluidHtml does not support the background-attachment property. So, of the three possible values for this property (scroll, fixed and inherit), Fhtml will always default to 'scroll.')
• The following shortcut specifies: background-color, background-image, background-repeat and background-position.

Here are some syntax options:

1.2 background-color

• Accepted values:

• Here's a running example. Make a pale blue background. Red and green are 0, blue is 100% and alpha is 25%:

1.3 background-image

• Use url to specify the path to your background image:

1.4 background-repeat

• Determines how (or if) your background image will be repeated. Accepted values:

repeat 

The background image will be repeated both vertically and horizontally. This is the default.

repeat-x 

The background image will be repeated horizontally.

repeat-y 

The background image will be repeated vertically.

no-repeat 

The background-image will not be repeated.

inherit 

Inherit from parent element.

1.5 background-attachment

• Fhtml does not support the background-attachment property. If you pass in a value, however, no one will get hurt. Fhtml behaves as it the value you always want is 'scroll.'

1.6 background-position

• Sets the starting position of a background image. Possible values:

• Here's a running example:

2 What's extra?

• Fluidhtml uses assets that can be stored and reused in an application. For more info, see Assets.
• Gradient, bitmap, pixelbender and swf backgrounds are among the types of assets that can be stored in this way.

2.1 Gradient backgrounds

• The following looks like a standard html background declaration, but instead of specifying a color, it points to a gradient stored in a <style type="xml/fhtmlassets" > node. Note that it also points to an image in the CSS, allowing you to easily combine images and gradients:

• Gradients in Fhtml can be animated. Examples coming soon.

2.2 Bitmap backgrounds

• To use a bitmap background as an asset, first create a bitmap asset, then use that asset in a background asset.

2.3 Pixelbender backgrounds

• To use a pixelbender as a background, first create a pixelbender asset and use it in your background asset and CSS background property:

2.4 Swf backgrounds

• FluidHtml lets you use any swf as the background of an element.
• To use a swf as a background asset, you must set the swf's Document Class..
• This example also shows how you can control a swf background:
  • onclick="background.swf.getChildAt(0).stop();
  • Note that getChildAt(0) is unique to this timeline. A timeline that had no nested movieclips would be controllable with background.swf.stop(), etc...

What we end up with is a guy and a dog running from a sphere in the top left corner! As one does...

2.5 Using scaleGrid to prevent background bitmap distortion

• Use the scaleGrid property to determine how bitmap backgrounds scale. Note how the rounded corners of the bitmap background stay the same while the rest of it scales.
• This is achieved by using scaleGrid="{x:20, y:20, r:-20, b:-20}"
• Once the example loads, resize the browser.

2.6 Using repeat-scale in CSS to create a scalable background without a background asset

• FluidHtml supports a special property called repeat-scale.
• In the example below, we mark a 20px region from each edge of the background. That region will not be scaled when the background is resized.
• To do so, we specify both repeat-scale and a value for the repeat-scale property to use: 20px. In this case we add that value as the last argument in the background shortcut property.
• The difference between this and the example above is that in that example, because we are using a background preset, which is defined in xml, we are free to set different values for each side of the rectangle that won't scale. In this example, we add an argument to the already bloated CSS background shortcut - and we don't want to add more than one!