Viewport units are relatively new to CSS3. They work similarly to existing length units like px or em, but represent a percentage of the current browser viewport.
In the example above, the image is set as the background of a div which has 100% width. The background image is centered, set to "no-repeat" and the background size is set to "cover".
If the height is set to 100% of the viewport - rather than the content area - the image will fill the browser window or device screen on page load rather than the full height of the page content. This is achieved by using "100vh" for the height.
This gives us a full size image to present to the visitor but allows it to scroll up and down along with the content below it.
To make this type of image work, we need a "Dynamic Width" template with the following modifications …
Completely blank template with no adjustment except browser background color.
Insert the viewport meta tag in the document head …
<meta name="viewport" content="width=device-width, initial-scale=1">
Remove the following divs and their styles …
Shadow, Container, Header, Content & Footer
Enclose inserted items in a div with either no min-width or adjustable min-width…
<div style="width:100%;min-width:320px;position:relative"></div>
Inserting items with relative position will allow the content to be made up from several widgets rather than just one and also allow for banners and slideshows to be inserted with 100vh to fill the browser/device height on page load like the example above.