Page 335 - Xara Web Designer Premium

Web Sticky and Stretchy Objects 335

You may also want a sticky object to be full width or full height, so stretchy objects that
are also sticky appear in front of your main page content. For example you may want a
sticky header across the top of your web page, with a sticky navbar on top of it...

Both of these browsers have "stretchy" content which fills the width of the browser window.
The header/navbar is also "Sticky" as well as "Stretchy" and so the page content will slide
underneath it as it remains visible.
Stretchy objects can be set to either SCALE or TILE, using the option on the dialog. In
most cases you will want the stretchy object to scale up and down to fit the browser
window, so choose the scale option. This works well with photos and solid filled
rectangles.
If you have a rectangle with a textured fill you will normally want this to tile rather than
scale, so the texture looks the same with any browser window size. So select the tile
option in such cases. Also if you have a vertical graduated fill, choose the tile option.

Scaling Photos
You can make an image stretchy to occupy the full width of the browser window. In this
case the image will scale up as you increase the browser width, but it does so within the
height of the existing image (so it doesn't’t grow vertically and thus push everything else
down as you make the browser wider). This means that the image is progressively
cropped vertically, as it grows horizontally (the aspect ratio of the photo is never altered
as that would look poor).

If you want to use a photo as a stretchy item, make it at least the full width of the page,
and on the STICKY/STRETCHY dialog select FULL WIDTH. You can then decide whether
you want the image to scale around the top, centre or bottom of the image using the
controls provided. The FULL HEIGHT stretchy works exactly the same way, but for vertical
stretched images (a lot less useful).
A Full width image can be scaled from the Top, Center or Bottom of the image.