I have created a Sandbox solution which contains two modules: one for Master page and other for Site Assets (js, css and images).

I have used background-image: url("") in my style sheet file to add image to my dives. When I deploy the sandbox solution my dev environment it works great but on SharePoint Online none of the background-image:url("") works at all. Here is one of elements in my css file:

#page-wrapper {
      background: url("/_catalogs/masterpage/munters/assets/UI/Images/backgrounds/site-bg.gif") repeat-x left top rgb(255, 255, 255); padding-top: 22px; padding-bottom: 50px; border-bottom-color: rgb(222, 222, 222); border-bottom-width: 1px; border-bottom-style: solid; min-width: 985px;
  • How is URL structure, eg: xxx.zzz.com/sites or something similar? May 16, 2013 at 8:21
  • yes, it is developer site on office 365 for developers, and the url is domain.sharepoint.com/sites/mysite.
    – Medes
    May 16, 2013 at 11:46
  • My experience is that, simply put, SharePoint is not a big fan of recognizing style information in div tags. Have you tried wrapping the section in a <span> tag instead and adding the class? Oct 4, 2013 at 0:15
  • I usually put the URL into the url() without quotes, so url(/path/to/css). Oct 4, 2013 at 0:16

3 Answers 3


I think the problem is the URL path of your img.

/_catalogs/etc/ will link to domain.sharepoint.com/_catalogs , and if the image only exists under your /sites/mysite it will be blank.

Try changing to either:

/sites/mysite/_catalogs/etc or

../_catalogs/masterpage if the css file is in the site assests.

I don't do branding, I guess there is a better way to add the URL paths.

  • no it was not the case, I tested both on my dev environment and online. it stopped working on both. (before it worked on my dev). it most have something with sharepoint 2013. I had created a free sharepoint online before February release (online sp 2013) and it works on it.
    – Medes
    May 16, 2013 at 12:26

No, it's because the ms-backgroundImage class overrides your declared style. The trick is to make your style more specific than the default.

I learned this here

  • This does not apply to most div:s, just one if I'm not wrong Oct 4, 2013 at 5:50

I found that using this CSS selector combination allowed me to overwrite the OOB styling with my own:

body.ms-backgroundImage {
  background: url("/style%20library/img/bg-blue.jpg") 0 0 no-repeat;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.