Axure Docs
  • Axure RP Reference
  • Axure RP Tutorials
  • Axure Cloud Reference
  • Support
  • Download

›The Basics

The Basics

  • Interactive Button
  • Hiding and Showing Widgets
  • Pass Text to Next Page
  • Anchor Link
  • Embedding Media
  • Full Width Image or Banner
  • Scrolling Region
  • Rotating Carousel / Slideshow
  • Navigation Menu
  • Tooltips
  • Tab Menu
  • Accordion Menu
  • Drag and Drop

Complex Interactions

  • Account Login
  • Auto Tab Fields
  • Blinking Text
  • Dynamically Set Droplist Options
  • Set Text with Droplist
  • Required Fields
  • Scroll Activated Sticky Header
  • Set Dynamic Panel State on Next Page
  • Slider Control
  • Terms and Conditions
  • Timer

Mobile Patterns

  • Swiping Slideshow
  • Toggle Switch

Full Width Image or Banner Tutorial

In this tutorial, you'll learn how to make an image or bar of color that fits to the full width of the browser window.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and double-click Page 1 in the Pages pane to open it on the canvas.

  2. Drag an empty dynamic panel widget onto the canvas from the Libraries pane.

  3. In the Style pane, check the box for 100% Wide (browser only).

2. Give the Dynamic Panel a Fill Color or Image

Use the options in the Fill section of the Style pane to set the dynamic panel's background fill:

  • To give the dynamic panel a fill color, click Color and use the options in the color picker.

  • To instead give the dynamic panel a background image, click the Image icon and then Choose Image to import an image file from your computer.

    Tip

    Set the image to Stretch to Cover in the dropdown to the right to ensure that it will always fill the full width of the dynamic panel.

3. Preview the Page

  1. Preview the page. The image should span the full width of the browser window.

  2. Try resizing your browser window, and notice that the image always adjusts to fit to the new width.

Additional Information and Tips

Full-Width Image Carousels

For a full-width image carousel, combine this technique with the one taught in the rotating carousel / slideshow tutorial. Give each state of the dynamic panel a different back image, and cycle through the images using the method described on that page.

← Embedding MediaScrolling Region →
  • 1. Widget Setup
  • 2. Give the Dynamic Panel a Fill Color or Image
  • 3. Preview the Page
  • Additional Information and Tips
    • Full-Width Image Carousels
Axure Docs
Stay Connected

Sign up to receive Axure tutorials and news. You can unsubscribe at any time.

Axure
Axure RP 10Axure CloudEnterpriseCompanyDownloadPurchase
Legal
Customer AgreementPrivacy PolicyGDPRSecurityPatents
Resources
BlogForumLicense Portal
Support
Learn and SupportGetting StartedReferenceWidget LibrariesAxure RP 9 Documentation and Tutorials
Copyright © 2002–2023 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.