Modern Theme Example: Customizing Page Background Styles
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