Overriding SharePoint 2010 CSS Classes – Background Images

I just overcame a tough little problem while branding a SharePoint 2010 site. I was trying to override the s4-title class in my themeable class but it just wouldn’t work. SharePoint Designer thought it was OK, my css class was loading last, ond IE Developer tools showed it as the active background image. Still no dice.

image

As is often the case when you’re overriding a class, the parent styles are in effect until overridden. I just couldn’t figure out what – the standard style didn’t show a background image. As it turns out, one was in fact declared in corev4.css (the standard set of classes). It didn’t show because it was positioned way above the page.

background:url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;

I’m not sure why they do this (I suspect that it has to do with the theming engine), but my background was inheriting it. Once I added

background-position:0 0;

to my overridden class, my background appeared just fine.

image

Hope this helps someone.

Advertisements

9 thoughts on “Overriding SharePoint 2010 CSS Classes – Background Images”

  1. Hey. It might have taken this post almost a year, but you know who you helped? That””s right. This guy. Thanks for sharing 🙂

  2. Wow, I spent almost 3 days trying to figure out how or why it wasnt showing. I really really really appreciate you figuring it out.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.