The slideshow on this page is a much better option than the previous one for responsive websites. Rather than have to stretch to fill the browser background, the image is set to fill the viewport width and height.
The slider is fixed in position and given a negative z-index so that the page content scrolls over it.
It also has the advantage of being able to insert a smaller image file for mobile devices and has an option to lazy load the images.
The images for the demo were resized to 1200 x 800px and 720 x 480px before importing into EverWeb. Since these images are in the background the quality doesn't need to be very high so smaller image files may suffice depending on the page content type..
Alt Text
Since the images are inserted using the HTML5 <picture> element the images can have an alt text attribute for inserting keywords for the search engines and screen readers.
Lazy Loading
The function to lazy load the images should be turned on last and the loaded image will disappear from view on the EverWeb design canvas.
This page uses the ThemeKit content fade in widget set to 2000 milliseconds to allow the first slideshow image to download and give a better visitor experience. It is inserted just above the Ixk Info footer widget and has a height of 10px and background color set to black with 100% opacity.
Text
The text blocks are created using the ThemeKit Text Module with the content background opacity set to zero and the wrap background set tp 50%.
The text modules are spaced out using the ThemeKit Spacer widget with the height set in viewport units rather than pixels to allow it to bring the blocks closer together as browser/device window height is reduced.
![ThemeKit Viewport Background Slider [1]](ewExternalFiles/hs-1m.jpg)
![ThemeKit Viewport Background Slider [2]](ewExternalFiles/hs-2m.jpg)
![ThemeKit Viewport Background Slider [3]](ewExternalFiles/hs-3m.jpg)
![ThemeKit Viewport Background Slider [4]](ewExternalFiles/hs-4m.jpg)