Multi Image Background
The page background consists of images stacked in a div. The images are given 100% width and a fixed height.
To prevent distortion as the browser/device width changes, the images are inserted using the CSS object-fit selector.
The images can be spaced out vertically if required showing a band of solid color between them. The spacer is removed from the last image.
Parallax
The background is made to scroll at a slower rate than the foregound objects using the jQuery scrolled function.
The relative speed is adjusted using a scroll ratio. The lower the ratio - the faster the content will scroll in relation to the background.
Layout
To create a full site page that is responsive down to the width of a tablet device in portrait mode, the page content width is set to 774px or less.
If viewing this page on a computer, reduce the browser width to see how the various items respond.
Content
Any type of content can be inserted using responsive widgets with a maximum width settings and hero widgets with a background opacity control.
Fixed Width Items
If the aim is to create a full site which is responsive down to the width of a tablet in portrait mode, fixed width items can be used as long as they are within the left/right boundaries of the page content area on the EverWeb design canvas.
Lazy Loading
The disadvantage to having a full size background image is that, to have decent quality, it needs to be a large file - usually, well in excess of 1MB. This obviously effects the page download time detrimentally.
By using several background images and lazy loading, the effect on the page download time can be considerably reduced.
In this example, the background images are around 200KB and only the first two download on page load.
SEO
Since these images are inserted using the <img> tag rather than in the background, they can have alt text. On the assumption that the image content relates to the page subject, having these alt text attributes allows extra keywords to be inserted for the search engines.
Page Content Height
Although it might appear that the content height would be equal to the sum of the heights of the images, this is not the case since the background div scrolls at a slower rate than the foreground items.
In this example there are four images - each with a height 0f 800px - making a total height of 3200px.
The scroll rate is set to 0.48 (48/100) and the page content height is set to 5000px.