I'm wrestling with how to reference a background image in my CSS file for a SharePoint Online site.

My site URL is like this: https://anothercomp.com/sites/intranet.

I have put my CSS and images in the style library and the problem is how to reference an image in my CSS without using the full URL. I had hoped that the following should work but that points to the root site (anothercomp.com/style library/)

Not working

.main-nav { margin:0; background:#0961a4 url('style library/img/bg_menu.gif') repeat-x; border-bottom:5px #000 solid;height:44px;min-width:960px;}

The only way I got this to work was to use the full URL but that is not working fine when moving the package between local dev site, Office365 dev site and Office365 production site


.main-nav { margin:0; background:#0961a4 url('https://anothercomp.com/sites/intranet/style library/img/bg_menu.gif') repeat-x; border-bottom:5px #000 solid;height:44px;min-width:960px;}

  • Could you check if you checked the image file in and published a major version? – Cthulhubutt Apr 22 '14 at 17:07

If your css-file is in the style library, and possibly also in a subfolder CSS, you need to walk up the DOM. Navigating from where your CSS are to where the image is located.

Move to your root site by adding ../../ before referencing the style library.

url('../../style library/img/bg_menu.gif') 

But you don't have to move as far as outside the style library. You could do this:

| 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.