Set up a responsive background image that resizes dynamically with the user's browser window, by using a dynamic panel and putting the background image into the panel, and then using the [[Window.width]] and [[Window.height]] properties to resize the panel.
- [Instructor] Sometimes we'll have a site designed…like this one where we have a full size background image…that shows up when we first load up the site,…and the rest of the content is down below.…And no matter how big or small…the browser window is when it first loads up,…that background image fills up the entire browser,…and then the content is right underneath.…When we want to size things to fit the browser like this,…we can the window.width…and window.height properties to do that.…In this example, we'll be setting up…this responsive background image for a hotel website.…I've got my exercise file open here for Landon Hotel…so that I can add that background image.…
They've already got some content down here,…but there's no image at the top right now.…There is an option in the style panel…for the page to import a background image.…I'll click to import my image from the exercise files,…and then I'll make sure that these center options…are checked and that it's set Stretch to Cover.…If I preview, you can see that…
- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties
Skill Level Advanced
1. Widget Properties
3. Dates and Times
4. Window Properties
5. Repeater and Item Properties
6. Global Variables
Global variables2m 14s
Using plugins on Axure Share2m 49s
8. When Things Go Wrong
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.