Heather Solomon's Blog

SharePoint 2007 Branding

Article Categories
Post Categories

  Jump to: Follow speheather on Twitter Follow Heather Solomon on Facebook
Heather's SharePoint 2010 Blog is located at blog.sharepointexperience.com

A common trick in CSS design is to set a background image in the body tag for a site that contains a lot of the graphic elements of a site.  This is often used to create colored columns and bars in CSS only design.  See a screenshot. For example:

body {
   background: url("myimage.gif");

When you do this in SharePoint, the background image will also appear in the Rich Text Editor used in the Content Editor Web Part.  See a screenshot.

You can fix this issue pretty easily. Add a DIV tag around your page contents, and set the background for the DIV to the image that you need to use. Then, in your CSS code, specify both BODY and the class/ID for the DIV:

body .MyDiv {
   background: url("myimage.gif");

Notice the space between body and .MyDiv! This is a contextual selector, only the tag with the class name of MyDiv in the Body tag will be affected.

Now the image will appear in your page, but not in the Rich Text Editor.  See a screenshot.

Some notes... if you add a class or ID name to the BODY tag and reflect that in your CSS, it will not fix the issue.  If you just move the image to a DIV wrapper and specify the image, it will not fix the issue.  It is the combination of the image being in a wrapper, and body + the wrapper being specified in the CSS file that fixes the problem.

posted on Thursday, September 27, 2007 12:24 PM

Copyright © 2005-2011. Heather Solomon.
Site design by Heather Solomon. Yes it is dated and purple. If I changed it, no one would recognize it! Check out my new home at sharepointexperience.com.

Blog Stats:
Posts - 390
Stories - 39
Comments - 1795
Trackbacks - 183
Follow speheather on Twitter

Follow Heather Solomon on Facebook

Branding/UI/UX Courses for SharePoint taught by Heather Solomon