Fullscreen background image

Category: 

  • Tip / Idea

One of our pilot phase participants asked me about making the background image always fill the screen. You can do this by adjusting the CSS. Here's how:

From your Content Management sidebar menu, click Site Background Image and click the Settings tab, or from your Administration menu, choose Configuration -> User Interface -> Dynamic Background -> Settings.

Click the "Advanced - CSS Behavior" link.

Leave .html as the selector.

In the CSS field, enter the following:

background-position:center fixed; background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

Click the Save Configuration button.

7/14/13