none
Background Image in SharePoint 2010 Master Page

    Question

  • Hello all

    I am trying to add a background image to the main part of my master page (When people enter the root site they will see this image as a background).

    I need to know what is the CSS calss that i should overwrite on my custom CSS file???

    I have a problem with knowing the right classes i should override to implement these custom style..

    For emaple...

    I added a code to a content editor (just to test the code) on the main page so that i can have a background image on the div.main-content

    here is the code:

    <style>
    .main-content --------> (is this the right calss?)
    {
    background-color:#F4F2E5;
    background-image:url('../Style Library/Images/Image.png')
    }
    </style>

    Nothing changed!!! I am new and noob so please advise.

    Isn't there anyway that helps me to determine the exact class i should override on my custom code and change it to the way i want?

    Thanks in advance.


    Mark as answer if it was an answer for you question.. Please don't hesitate to ask for any further help..


    Sunday, February 26, 2012 9:00 AM

Answers

  • Hi.

    Glad I could help.

    In order to add a custom CSS in your masterpage, you need to do it a bit differently.
    In SP2010 we use a contol called cssregistration. Add a line that looks something like this, right below the existing csslink:
    <SharePoint:CssLink runat="server" Version="4" /> (under this you add:)
    <SharePoint:CssRegistration runat="server" name="/Style%20Library/Scripts/style.css" After="coreV4.css" />

    That will tell SharePoint to load your custom CSS after the default CoreV4 css, so your styles will trumph the default styles.
    When you have added this, load the page and then check with F12 if the css is loaded(Under the CSS tab).

    Good luck.

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    • Marked as answer by Amer Abusham Sunday, February 26, 2012 3:22 PM
    Sunday, February 26, 2012 3:13 PM
  • Hi Abushaam.

    Try this instead:

    Either:

    BODY
    {
    background-color:#F4F2E5;
    background-image:url('../Style Library/Images/B360 Large.png')
    }

    or:

    .s4-workspace
    {
    background-color:#F4F2E5;
    background-image:url('../Style Library/Images/B360 Large.png')
    }
    

    That should do it.

    For a complete(almost) reference to all classes in SharePoint:
    Heather Solomons: SharePoint 2010 CSS Reference Chart
    http://sharepointexperience.com/csschart/csschart.html

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    • Proposed as answer by romeo doncaMVP Sunday, February 26, 2012 1:44 PM
    • Marked as answer by Amer Abusham Sunday, February 26, 2012 3:22 PM
    Sunday, February 26, 2012 10:35 AM

All replies

  • Hi Abushaam.

    Try this instead:

    Either:

    BODY
    {
    background-color:#F4F2E5;
    background-image:url('../Style Library/Images/B360 Large.png')
    }

    or:

    .s4-workspace
    {
    background-color:#F4F2E5;
    background-image:url('../Style Library/Images/B360 Large.png')
    }
    

    That should do it.

    For a complete(almost) reference to all classes in SharePoint:
    Heather Solomons: SharePoint 2010 CSS Reference Chart
    http://sharepointexperience.com/csschart/csschart.html

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    • Proposed as answer by romeo doncaMVP Sunday, February 26, 2012 1:44 PM
    • Marked as answer by Amer Abusham Sunday, February 26, 2012 3:22 PM
    Sunday, February 26, 2012 10:35 AM
  • And yeah, the best tip ever...

    Use F12 Developer Toolbar to find the classes you need, select the arrow, then point to a section and you will see which classes and which styles are used.
    Firefox has a similar feature(web developer?).
    If you are really planning to do some styling and branding, learn the developer toolbar.

    And one more. I would instead of changing the default master, add a custom css under the masterpage settings in site settings. This will keep the master default but add the styles from your custom style sheet. Just create a stylesheet(css), upload it to a library everyone can access then add the link to the custom ctylesheet setting.

    Regards 


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    Sunday, February 26, 2012 10:39 AM
  • Hello Thomas,

    Firstly, Thanks for the link. This is what i was looking for exactly..

    Secondly, i did as you said and created a custom CSS file, uploaded it to the style library, added the following line of code in the Master Page (in sharePoint designer) to read from the custom CSS file, check In the master page and approved the page:

    <link href="/Style%20Library/Scripts/style.css" rel="stylesheet" type="text/css" />

    i used both codes you provided but there was no change:

    .s4-workspace
    {
    background-color:#F4F2E5;
    background: url('/Style%20Library/Images/sample.png');
    }

    when i refresh the page nothing change at all...


    Mark as answer if it was an answer for you question.. Please don't hesitate to ask for any further help..

    Sunday, February 26, 2012 2:14 PM
  • Hi.

    Glad I could help.

    In order to add a custom CSS in your masterpage, you need to do it a bit differently.
    In SP2010 we use a contol called cssregistration. Add a line that looks something like this, right below the existing csslink:
    <SharePoint:CssLink runat="server" Version="4" /> (under this you add:)
    <SharePoint:CssRegistration runat="server" name="/Style%20Library/Scripts/style.css" After="coreV4.css" />

    That will tell SharePoint to load your custom CSS after the default CoreV4 css, so your styles will trumph the default styles.
    When you have added this, load the page and then check with F12 if the css is loaded(Under the CSS tab).

    Good luck.

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    • Marked as answer by Amer Abusham Sunday, February 26, 2012 3:22 PM
    Sunday, February 26, 2012 3:13 PM
  • Sure you did help...

    I finaly managed to make it work :)

    I just changed the class to use .main-content as below:

    .main-content
    {
    background-color:#F4F2E5;
    background: url('/Style%20Library/Images/image.png');
    background-repeat: no-repeat;
    background-position: center;
    }

    the IE developer tool was very helpful thanks again. 

    The "link ref" line of code worked fine. i think both this line of code and the one you mentioned work as same right?

    Thanks again


    Mark as answer if it was an answer for you question.. Please don't hesitate to ask for any further help..

    Sunday, February 26, 2012 3:22 PM
  • Great, thanks!

    I think that you will have better control using the cssregistration, but if your way works, that is up to you.
    You could read up on my way here:

    What is new with the CssRegistration control in SharePoint 2010
    http://www.wictorwilen.se/Post/What-is-new-with-the-CssRegistration-control-in-SharePoint-2010.aspx

    Regards


    Thomas Balkeståhl - Technical Specialist - SharePoint - http://blksthl.wordpress.com

    Sunday, February 26, 2012 3:25 PM