© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
FULL-WIDTH IMAGE OR BANNER
Add an image that continually readjusts to fit the full width of the browser window.
STEP 0: DOWNLOAD THE TRAINING FILE
If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.
STEP 1: GET STARTED
Open the page named "Full-width image or banner" in your copy of AxureTraining.rp.
The page contains a dynamic panel called "Full-width background".
Select "Full-width background". In the Properties tab, click the checkbox control labeled "100% Wide (browser only)".
STEP 2: ADD A BACKGROUND IMAGE
Switch to the Style tab. In the "Back Image" area, click the button "Import". You can download this image to import, or choose one of your own. (To make a solid color stripe across a page, use the “Back Color” option instead.)
In the dropdown at the bottom of the Style tab, choose the option "Stretch to Cover". With this option selected, the image will always take the full browser width.
STEP 3: PREVIEW
Try resizing the browser window. Notice that at larger widths, some of the image will be cut off vertically. This is because the image maintains its aspect ratio while the dynamic panel does not.
MORE: PAGE BACKGROUND IMAGE
To make an image cover the entire browser window, set a background image for the page itself. You can do this by clicking a blank area of the canvas to switch to the Page Inspector and then following the steps in Step 2 above. A background image for a page will always take the full browser width and height when set to “Stretch to Cover”.
drag the scrollbar
left or right