left arrow right arrow help header logo background

Add background color and image to a page

In this section, we are going to show you how to add a color and an image to the background of a page which will fill the whole browser window. The following is a screenshot of the final result (Video Tutorial - 3:20):
 
 
We will use the following image "page-background.gif" as background and repeat it across the top of the browser window.

 
  1. Select Tools -> CSS Style Editor from the main menu or press this button on the toolbar to open the CSS Style Editor.

  2. Press the "Add" button on the CSS Style Editor to create a new style and press the "Rename" button to change the name to page-background.

           
     
  3. Select the "Background" tab on the left. Select the option "Color" and set the value to "#F2F4F4". Select the option image and choose the image "page-background.gif". Set "Repeat" to "repeat-x" so that the image will be tiled horizontally across the top. Set the "Horizontal Position" to "left" and "Vertical Position" to "top".


     
  4. Press the "OK" button to save the style.
     
  5. Open the page that you want to add the above background style. You may like to add it to a template page so that all the pages that use the template page will have this style automatically. Right-click on the blank area of the page and select "Page Properties" from the context menu. The dialog will look like one of them depending on whether the page is a template page or a normal page. Then select the "Style" tab.

       
     
  6. Select "body" from the drop down menu of "Container". Press the "Add" button and select the style "page-background" from the Select Styles Dialog. Press the "OK" button to add the style.


       
     
  7. Press the "OK" button on the Page Properties Dialog to apply this style to the page. After this, the page will look like the one on the top of this page.