Question: How do I add a background image?

There are really two issues here. First is, "Should you add a background?", and the second one is, "How do I add a background image?".

Not all images serve well as background images. If the image is too busy, it can distract the visitors from your main content. High contrast images, or images with wide color ranges, can make your web site unreadable. Visitors might have trouble reading your content in areas where the text color matches the background color. So the background you choose, needs to blend nicely with your font colors and other sections of your site. You don't really want a background image to overwhelms your web page(s). And, do you really want a overall background image or one that is in the background of a section?

While the Website Wizard is not really set up for adding a background image, it is possible. A background image doesn't really make sense for Wizard Themes. Themes often have backgrounds, and usually have enough images, to make another background worthless. But a Wizard Layout could support a background image.

<div id="pageWrapper">   <div id="pageHeader"> </div>   <div id="subPageWrapper">     <div id="siteNavigation">
      <div id="listBreaker"> </div>
    </div>
    <div id="extraContent">
      <div class="contentContainer"> </div>
    </div>
    <div id="userLinks"> </div>     <div id="extraContent2">
      <div class="contentContainer"> </div>
    </div>
    <div id="mainContent">
      <div class="contentContainer"> </div>
    </div>
    <div id="subPageBreaker"> </div>   </div> <!-- End "subPageWrapper"-->   <div id="pageFooter"> </div> </div> <!-- End "pageWrapper"-->

It's not very obvious when you start, how a background image will display. It's usually assumed that the background is going to be behind all of your web content, and you will see it through all of the various content areas. Well, with the Layout based Wizard, this isn't true. Each content area for the Layout based Wizard has a background color defined. Since the definition does not include transparency, the color will simply overlay the background image.

The code listed below can be added directly to one of your content areas. Be careful not to make it the first thing in the area. In fact, placing it last is possibly the best.

If you want more control over your web pages so that you can add a background, learn HTML and CSS, upload a template, and use the editors available in the File Manager.


This style specification is to change the background color.

<STYLE>body{ background-color: yellow); }</STYLE>

Or, you can use the HEX codes:

<STYLE>body{ background-color: #00ff00); }</STYLE>

For other color names, and HEX codes, try this link to W3Schools - HTML Color Names.


This style specification specifies a background image that will scroll with the page.

<STYLE>
body{ background: url(http://[your URL]/your_bg_image.gif); }
</STYLE>


This style specification specifies a background image that will stay stationary, as you scroll the page.

<STYLE>
body{ background: url(http://[your URL]/your_bg_image.gif );
background-attachment: fixed }
</STYLE>

For more information on managing your background with a style, try this link to W3Schools - CSS Background.