Skip to content

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.

9 Comments

  1. Kobus Kobus

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

    Thank you! your post saved me!

  3. LM LM

    Thanks dude! u saved my day!

  4. T Man T Man

    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.

  5. Thank you! 🙂

  6. maima maima

    Can you tell me the steps because I find a problem

  7. Anonymous Anonymous

    Awesome my friend ! Thanks

  8. Anonymous Anonymous

    Thanks you just save me from another day of frustration. Great post

  9. Anonymous Anonymous

    THANK YOU FOR THIS POST! I have spent all day trying to figure this out. You are a lifesaver.

Leave a Reply

Your email address will not be published. Required fields are marked *

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