How to change the blue background image behind the SharePoint 2007 Page

Question

I notice that by default, SharePoint 2007 page, there is a beautiful blue background image.

May I know how can I change this background image via SharePoint Designer?

Answer 1

Editing the master page in SharePoint designer is possibly (depending on your environment) not the best idea; this will unghost the master page, and if you have a lot of site collections you'll need to apply your "fix" or your custom master page to every site collection in your environment. A better option would be to create a custom CSS file that overrides the out of the box styles that you want to change. If you were to store that CSS file on your root site collection, you could then point all of your master pages to that file.

If you have a bunch of site collections, you'd still have to do it on every one, but going forward you would only have one CSS file to change, vs editing every master every time you want to make a change.

In the event that you are going to edit the master page, you should always create a copy of the master, and edit the master. Do not edit the default master; you certainly can edit the default (SharePoint won't stop you), but it can create lots of headaches with upgrades and other future farm customizations, or maintenance.

The best practice to this is a Visual Studio solution that stores the applicable assets in the 12/14 hive and manages the deployment for you so it can be easily reused across multiple site collections. It "can" be done with SharePoint designer, but is typically not the best practice.

Answer 2

You can either override the css styles for that page or identify the elements that use the background color/images and with javascript remove them when page loads.

You could also create another master page without the background image and apply it to that page.

Answer 3

The best approach is to create a new master page and apply your CSS styling to it.

The blue background is split into multiple parts, so when you want to change it, you will need to add your custom styling for the following classes.

.ms-pagetitleareaframe table
.ms-titlearealeft
.ms-pagetitleareaframe
td.ms-titlearearight div.ms-titleareaframe
div.ms-titleareaframe
.ms-pagemargin, td.ms-rightareacell div.ms-pagemargin
.ms-nav

I think that are most of them.