Stretchy Objects

Xara Web Designer 11 Premium allows you to make an object fill the entire width or height of the browser window. You can make any rectangle or image stretch to fill the browser window, either horizontally or vertically, using the Web Sticky/Stretchy dialog accessed by right clicking on an object and selecting Web Sticky/Stretchy.

Stretchy objects can be set to either ‘scale’ or ‘tile’, using the option on the dialog. The scale option is perfect for setting photos to fill the entire browser width or height.

An image set to stretch full width and scale within the main variant could be viewed by your site visitors on large screen monitors and is therefore best used with high resolution images. Stretchy images used within smaller variants only need to be scaled to the size of the next breakpoint (shown in the Website variants dialog accessible from the utilies menu) but should contain sufficient resolution to allow the image to be exported (192dpi).

Applying the scale option causes the image to be applied as the background image of a container with the background size property set to 'cover' defined at as 'Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area'.

If you have a rectangle with a flat or textured fill or a vertical gradient then 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.

The stacking order of stretch objects is maintained for stretchy objects applied to the pasteboard background layer.

On all other layers, including the page background layer, stretch objects behind other content applied to foreground layers. The exception is when a stretchy object is made sticky in which case it will appear in front of other objects.

Yes. This is possible for Stretch objects which are set to scale. A Full width image can be scaled from the Top, Center or Bottom of the image. A Full height image can be scaled from the Left, Center or Right of the image.

We recommend only applying stretchy to Quadrilaterals (4 sided shapes). Stretchy is not supported for the following types:

  • Text
  • Placeholders/Widgets
  • Text Panels (groups with the "htmltext" name applied to text inside)
  • Objects with reveal animations
  • Navbars
  • Objects inside groups

Yes. We recommend exporting the object as a rectangle or as part of a softgroup. This ensures the object is represented natively in HTML and not converted to a bitmap.

Yes. You can set the fill type of your shape to be a bitmap and set the shape to be stretchy.

No. The ability to apply stretchy is only available in the premium version.

(7 vote(s))
Not helpful