0

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;
}
Improve this question
4
  • How is URL structure, eg: xxx.zzz.com/sites or something similar? – Anders Aune May 16 '13 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 '13 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? – NotVonKaiser Oct 4 '13 at 0:15
  • I usually put the URL into the url() without quotes, so url(/path/to/css). – David Lozzi Oct 4 '13 at 0:16
1

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.

Improve this answer
1
  • 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 '13 at 12:26
0

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

Improve this answer
1
  • This does not apply to most div:s, just one if I'm not wrong – Robert Lindgren Oct 4 '13 at 5:50
0

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;
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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