Changing background and look of sites - SharePoint 2010

Question

How can I set a picture for a background in all my pages? Can overall look of the site be changed?

Because the only thing I found in site settings is "Site theme" and add icon... However it is not enough for me. I want to add background and change overall look of my site. Is it possible?

Answer 1

As a workaround,

You can create your own Page Layouts in SharePoint Designer with background color/image also you can do whatever customization you want. Then create pages using that page layout & it will show background on pages.

Steps:

1. Open site in SharePoint Designer
2. Edit page layout (For example "Blank Webpart Page Layout". Please take backup of original before making changes).
3. find <asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server"> tag.

4. add below css under above tag.

   <style type="text/css">
       .ms-bodyareaframe{
           background-image: url("url");
       }
   </style>
   

5. Save & publish page layout.

Apart from page layout, if you want to change look and feel of header, footer, side navigation then you can also make your own custom master page in SharePoint Designer.

Answer 2

Why would you want to have a background picture for all your SharePoint pages? That is an awful user experience. SharePoint is a collaboration platform for sharing documents in document libraries and using lists to manage data. Why slather company branding over all SharePoint pages?

Have you customized Word and Excel to show that background image on every page, too? I thought not. So why would you want that in SharePoint? It's a tool for collaboration. Give it a few custom colors, but then leave it alone.

If you are really intent on pursuing this, the Site theme and icon are not the way to go, as you have found out.

You will need to use SharePoint Designer to either inject custom CSS into your pages or customize the Master page of your site. This will not be a simple check box, but will require a good understanding of CSS and how SharePoint 2010 CSS works.

But I really strongly, STRONGLY advise against that idea.

Answer 3

Another way could be: go to Site Settings > Look and feel > Change the look and select Current. Next, on the left, you can set a background. This background is by default only partly visible (sort of mask), so it doesn't interfere with the content too much.

You could still change the opacity using CSS:

.ms-core-overlay{background-color:rgba(255, 255, 255, 0.85)}

Where 0.85 is the opacity of alpha mask