Confluence 6 CSS Guide: Modifying the Top Background

At the top of Confluence's default pages are menu links about the site, where Quick Links , Browse Menu, User Menu, and Quick Find input boxes are defined. In this example, we will try to modify the background of the top menu section and some custom images.

1. Create a custom picture. In this example, we will create a custom header image, using 1046 x 61 pixels.
2. Upload custom images to the space page you wish to customize.
3. Note that you need to upload a new image (in this example the page ID is 658833839 ).
4. Create your custom CSS file for the header modification. In this example, we're uploading a new image file (called header.png ) for a specific page ID (page ID 658833839 ). This file is also in the same space.
   

   #header .aui-header  {
          background-image:url('../download/attachments/658833839/header.png');
          background-repeat: no-repeat;
       }
   

5. Log in to the system as a space administrator.
6. Open the space administrator interface.
7. Click Stylesheet .
8. Click Edit to modify the code in the text input box.
9. Post your custom CSS file to the text input box.
10. Click Save and reload the page (you may need to force refresh your browser). The background of the space will be modified.
11. Custom header files will be applied to all pages in the space. If you wish to remove this modification and restore it to its original state, you can simply delete all the contents of the stylesheet and click Save .

 

https://www.cwiki.us/display/CONFLUENCEWIKI/Basic+Styling+Tutorial