PDA

View Full Version : CSSing a page background image


dsnyder
04-05-2007, 11:54 PM
Id like to add a page background image through CSS rather than using the page properties. Im not sure where to put it in the code? I want the outer regions of the page to have the image but not the content area.

Adding the background-image to the 'body' section seems to not be correct. Here is the beginning of the code:

body {
margin: 0px;
padding: 0px;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 100%;
text-align: center
}
#wrapper {
margin: 10px auto;
width: 740px;
border: 1px solid #999999;
background-color: #FFFFFF;
text-align:left;

gmcrone
04-06-2007, 08:23 AM
Adding it to the body is the correct method.

It will show your background image, then the wrapper div sets a background colour for your content area, in effect covering up the background image just in the content area.

Mike...

domedia
04-06-2007, 01:02 PM
Adding the background-image to the 'body' section seems to not be correct. It is right, but you have nothing in your code defining css background image, not sure how you expect to have the background image appear when you haven't even inserted the code for it.

dsnyder
04-06-2007, 02:05 PM
you have nothing in your code defining css background image, not sure how you expect to have the background image appear when you haven't even inserted the code for it.

:) fair enough. I wasn't expecting any bkgd image from the posted code. Really.

I tried this code before with no luck.

body {
margin: 0px;
padding: 0px;
background-image:url(../Images/BkGrd/img_39.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size: 100%;
text-align: center;
}

What is wrong with this? Maybe I missing something that is overriding my background-image request? Should I post more of the code?
derek

domedia
04-06-2007, 02:29 PM
background-image:url(../Images/BkGrd/img_39.gif);
There is nothing wrong with that line, your CSS is valid and correct code.
All you have to make sure the path is correct and that there is an image with that name at that location.
Remember if this is in a separate CSS file, the image location is relative to the CSS document.

dsnyder
04-06-2007, 02:39 PM
Thanks,
the path and image should be correct. When I link to the image in the page properties all works gloriously.

Remember if this is in a separate CSS file, the image location is relative to the CSS document.

What do you mean? Maybe this is the issue.

domedia
04-06-2007, 02:50 PM
The path to your image in your CSS rule, has to be relative to the CSS document the rule is in.
I can't explain it any other way as it says exactly what it is..

If your CSS file is domain.com/assets/styles.css
If your image is domain.com/images/image.jpg

then the path should be from the CSS file to the image:
../images/image.jpg.