7

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

Working

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

Phil Greer
  • 2,287
  • 9
  • 21
  • 23
Niclas Carlsson
  • 361
  • 2
  • 11

1 Answers1

1

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:

url('../img/bg_menu.gif')
Benny Skogberg
  • 25,542
  • 12
  • 68
  • 163