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

Search:

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

Comments

# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
The Mossman
Posted @ 9/27/2007 2:45 PM
We ran into that on our recent project. Took me a while to figure out what the heck Sharepoint was doing. Extremely frustrating behaviour.
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Kip
Posted @ 11/16/2007 12:31 PM
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.
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Kip
Posted @ 11/16/2007 12:45 PM
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.
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Bryan Peters
Posted @ 11/30/2007 1:32 PM
I reused the form element of the page. No need to add a wrapper div!

form#aspnetForm { }
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Gary Irving
Posted @ 12/21/2007 9:13 AM
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
re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Cynthia
Posted @ 1/16/2008 7:12 PM
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
re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Cynthia
Posted @ 1/16/2008 7:18 PM
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
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Iain Munro
Posted @ 3/10/2008 12:31 PM
Hi Cynthia

Check out www.contenteditorwebpart.com.

There is a date and time field working from within a CEWP.

Iain
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
Diantha van Marion
Posted @ 3/21/2008 10:14 AM
http://blogs.tamtam.nl/diantha/2008/03/21/UsingBackgroundImagesInYourSiteDesign.aspx
# re: SharePoint 2007 Design Tip: Using Background Images in your Site Design
javascript
Posted @ 6/17/2008 2:45 AM
css background examples , Properties , Attribute - - http://css-lessons.ucoz.com/background-css-examples.htm

Title
Name
Email (never displayed)
Url
Comments
ALL COMMENTS ARE MODERATED! Sorry for the inconvenience, but it is how I keep all of the spam and advertisers out. I moderate comments about once a week and your comment will appear soon. Thanks for posting!
Remember Me?
Please add 7 and 8 and type the answer here:

Blog Stats:
Posts - 375
Stories - 38
Comments - 1441
Trackbacks - 182