Full Page Background with Vegas

Jump past navigation
View settings

Full Page Background with Vegas

The Vegas display widget creates a background image slider, placing a background behind everything on the page - as here, or behind a specified element such as an area or block.

With most themes, you will also need to either modify the theme to provide a transpartent or opaque background to key elements, or to configure this display widget to force a transparent background and then add backgrounds to key blocks or other elements.

The backgrounds added here are provided through a class for just this page declared in a header extra content attribute.

<style>
.omni-vegas1{
    background-color:rgba(255,255,255,0.85);
    border-radius:5px;
    border:1px solid rgba(150,150,150,0.9);
    padding:10px;
}
</style>

Block and area design was then used to add that class to specific blocks and areas.

Full-page background images can be large files. If you need to economise on image size, Vegas can be used with deliberately undersized images. This can be achieved by one or more of:

  • uploading undersized images
  • selecting appropriate thumbnails in the edit dialog
  • specifying an over/under scale in the edit dialog

Undersized images could exhibit upscaling or compression artefacts. To combat this, Vegas supports a selection of overlay patterns which do a remarkably good job of distracting and masking such artefacts.

Responsive image selection is then made in-browser as the page is rendered, so rendering on a mobile device may use a smaller image than rendering on a full screen display.

The Vegas display widget supports many transitions and animations. Here it is configured for a simple fade in transition followed by a parralax (Ken Burns effect) animation.

Additional Pages