Example: Customizing Page Background Styles (Modern Themes)

In Modern themes, an image (either a single graphic or a repeated background tile) is displayed on each page in the background to add interest. You may change this image, or simply set a background color to coincide with your desired look-and-feel.

/* existing definition in BaseStyles.css */

.pageBackground, .pBack { /* body */

     background: fixed;

     background-color: #9bb82c;

     background-image: url(../../Images/pBack.gif);

     background-position: center top;

     background-repeat: no-repeat;

     font-family: Arial, Verdana, sans-serif;

     margin-left: auto;

     margin-right: auto;

     padding-top: 76px;

     width: 1000px;

     }

 

Create your own image (e.g., mypBack.gif), and display it in the background:

/* new definition in Styles.css */

.pageBackground, .pBack { /* body */

     background-color: #97a6b9; /* if your background image does not fill the entire background of the page, or is not tiled, select a background color to fill the rest of the page; override the default attribute */

     background-image: url(../../Images/mypBack.gif); /* override the default attribute */

     }

The resultant page background looks like this:

 

Alternatively, you can use a background tile image:

/* new definition in Styles.css */

.pageBackground, .pBack { /* body */

     background-image: url(../../Images/mypBackTile.gif); /* override the default attribute */
    background-repeat: repeat; /* override default attribute */

     }

The resultant page background (tiled) looks like this:

Finally, instead of a background image, you can simply use a background color:

/* new definition in Styles.css */

.pageBackground, .pBack { /* body */

     background-color: #ba217b; /* set to a raspberry color; override default attribute */

     background-image: none; /* override the default attribute */
   }

The resultant page background (raspberry color) looks like this