© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

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

Click 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”.

MORE RESOURCES

TRY IT!

drag the scrollbar

left or right

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE