Css background image

[two4god07]

I want to add a gradient to a single section of my webpage. I have it split up in div's which work out nicely. I have the main background set to black for the entire document, and now I'm just trying to edit the content.

Here is my short css

body {background-color: black;}
h1, h2, h3, p, link, li, td {font-family: arial, tahoma, san-serif; color: white;}
#head {margin-left: 10%;}
#toc {float: left; margin-top: 20%; border-right: thin solid orange;}
#content {margin-left: 15%; background: url('gradient.jpg');}

Why is the "gradient.jpg" not showing up on my page?

Do I have to position my content div rather than just add a margin?

but even so.. the image should have tiled so that really wouldn't have made a difference.

[swa66]

What is in your element with id content ?
Does it have in-flow content at all (or are all the children floated or absolutely positioned (it will collapse if it has no content itself).

[two4god07]

<div id="content"><h3>Mission Statement</h3>

<p>actual mission statement text</p>

...
...
</div>

Thats the section I'm trying to add the background to. It's a basic frameless framed layout

the menu on one side

header on top

then the content

[edited by: swa66 at 12:18 am (utc) on Jan. 8, 2009]
[edit reason] removed specifics [/edit]

[swa66]

As such, I don't immediately see a reason.
If you replace the background image with a solid background color, does that show up ? -> might indicate the browser having trouble getting the file

Is the URL of the image relative to the CSS file ? (i.e. do you have the gradient.jpg in the same directory as the css file you referenced ?)

Can you open the image with a web browser ?

[two4god07]

the image is in the same directory.. the color changes if I just change the color.. it does open.. It is a thin black and gray line if tiled would make a gray to black straight up and down gradient.

[rocknbil]

Why is the "gradient.jpg" not showing up on my page?

try removing the quotes . . .

#content {margin-left: 15%; background: url(gradient.jpg);}

Second, be sure you have a valid doctype [webmasterworld.com] and the page validates [validator.w3.org].

Of course make sure #content actually has some content and it's being referenced correctly. With a black background, you can add a temporary border to make sure this is happening . . .

#content {margin-left: 15%; background: url(gradient.jpg); border: 1px solid #ffffff; }