SharePoint 2007 Design Tip: Using Background Images in your Site Design

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.

14 thoughts on “SharePoint 2007 Design Tip: Using Background Images in your Site Design”

  1. We ran into that on our recent project. Took me a while to figure out what the heck Sharepoint was doing. Extremely frustrating behaviour.

  2. This might be fine if defining your own master pages but what if I want to apply a fixed-width design with a background image and I want to skin it as a theme only?Using the CSS overrides in the theme, below, I am definately in trouble with the content editor and add web part screens to name the first few that are broken.BODY { background-image:url(Corp_bl_bkgb.jpg); BACKGROUND-REPEAT: repeat; WIDTH: 925px; margin-left:auto; margin-right:auto; text-align: center; BACKGROUND-COLOR: #596e9e;}TABLE.ms-main { BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid; WIDTH: 925px;}I started with the Simple theme and branded it so that it would skin the default master with no additional CSS overides. I also tried CSS only overrides and Custom Master Pages/css but did not like the fact the the pages from _layouts were not skinned using either of these methods.

  3. This might be fine if defining your own master pages but what if I want to apply a fixed-width design with a background image and I want to brand it using a theme only?Using the CSS overrides in the theme, below, I am definately in trouble with the content editor and add web part screens to name the first few that are broken.BODY { background-image:url(Corp_bl_bkgb.jpg); BACKGROUND-REPEAT: repeat; WIDTH: 925px; margin-left:auto; margin-right:auto; text-align: center; BACKGROUND-COLOR: #596e9e;}TABLE.ms-main { BORDER-LEFT: #FFFFFF 1px solid; BORDER-RIGHT: #FFFFFF 1px solid; WIDTH: 925px;}I started with the Simple theme and branded it so that it would change the default master with no additional CSS overides. I also tried CSS only overrides and Custom Master Pages/css but did not like the fact the the pages from _layouts were not branded using either of these methods.

  4. Heather,I am experiencing the issue you describe. My problem is I’m only a hacker and don’t completely understand how to implement the change you mention – particularly where to put the <div> tag in the master page.In our situation, we created a custom master page from default.master and made one minor change to the custom page. The only change we made was to increase the maximum display levels: MaximumDynamicDisplayLevels=”3″ in the TopNavigationMenu.We also created a custom theme based on one of the out of the box themes and updated the theme.css file with the following code:.ms-main{ background-image: url(“URL of our background Image”); background-repeat:no-repeat; }Note: ms-main is referenced by this line of code in the custom master page:<TABLE class=”ms-main” CELLPADDING=0 CELLSPACING=0 BORDER=0 WIDTH=”100%” HEIGHT=”100%”> I’m not quite making the connection between your solution and my situation. Any help you can provide would be very much appeciated.Thanks,Gary

  5. I’ve yet to find a way to insert the current day and time in the background of each page or even simply the central site page(below the site title);i.e., “Wednesday, January 16, 2007” The team was able to insert a date and time thru Java, but it was very industrial and as of yet, impossible to change the size and font. there’s got to be a way to place it without the use of code. Is there a control for this feature besides the control which places a current date the page was edited? (I found that one). Thank you very much. Cyn

  6. I have yet to find a control which will allow me to insert the current day and date into the page. Javascript is not helping as I cannot change the industrial looking font, font size and color. There is a control in designer which displays the current date only when the page has been modified, however, I don’t plan on modifying it every day, so it won’t do. I’d appreciate any help. Thanks

  7. I need to change the background (or other css props) on the quick launch for the page that I am currently on (e.g. the Shared Documents allitems page has to have Shared Documents on the quick launch with a diff backgroundany ideas?you can email me at mbierly @ lds DOT com (trying to minimize span from bots)

  8. body.ms-builderbackground {background-image: none !important;}I found that this works too. This is the body class for the html editor in WSS.

  9. Hi Heather,Great article as always! I have a question with regards to this and the Quick Launch Nav bar. I want to add an image to the far right of each node in the Quick launch bar and was wondering if this was the way to do it or if I had to programmatically generate the menu adding the image to each node?Do you have any good examples of customising the design of the Quick Launch Bar?Thanks for any help!

  10. I just modified that custom CSS theme by adding:.ms-WPBody { background: none;}Is there a reason why I shouldn’t be doing it this way that I have overlooked?

Comments are closed.