Image does not appear with CSS

[njoay]

Hello all,

I'm having issues with my CSS & XHTML coding in Dreamweaver. I'm trying to get a header image (normal rectangle) to appear as a background to my inline list, but for some reason the image doesn't appear and instead a gray (rectangle) image appears. And when I preview it in a browser, no image shows at all. And I have no clue as to why this happens. I've checked the path to the image and the other images on my page show up, so I don't think it's a path issue.

If anyone can help me figure this out, I would appreciate it. Below is the CSS:

#top {
background: transparent url(../images/top-header.jpg) no-repeat;
width: 560px;
height: 30px;
display: block;
}

#top-container {
margin-top: 0px;
display: inline;
width: 760px;
height: 20px;
list-style-type: none;
}

Here's the XHTML:

<!--TOP CONTAINER -->
<div id="top">
<ul id="top-container">
<li>Date: December 1, 2006</li>
<li class="right">Issue No.</li>
</ul>
</div>
<!-- /TOP CONTAINER -->

Any help, input is appreciated! Thanks

[fasterthanlight™]

Try this instead:



#top
{
background-image: url(../images/top-header.jpg);
background-repeat: no-repeat;
width: 560px;
height: 30px;
}
I don't think you need the display: block; in there but I don't know your site, so you may

[simplistik]

Try this instead:



#top
{
background-image: url(../images/top-header.jpg);
background-repeat: no-repeat;
width: 560px;
height: 30px;
}
I don't think you need the display: block; in there but I don't know your site, so you may



#top {
background: transparent url(../images/top-header.jpg) no-repeat;
width: 560px;
height: 30px;
display: block;
}

exact same thing...

if you take the list out does it show the image?... to me it just sounds like a pathing problem

[fasterthanlight™]

Well I figured the "transparent" thing is screwing it up.... What does "transparent" do anyways?
I looked it up at w3 and the say it only applies to background-color not background-image.

[njoay]

Hey all,

i found the answer. my jpg was in CMYK mode, and when I changed it to RGB, Dreamweaver recognized it.

Thanks for everyone's help and sorry!

[simplistik]

Well I figured the "transparent" thing is screwing it up.... What does "transparent" do anyways?
I looked it up at w3 and the say it only applies to background-color not background-image.right... using background is short hand... so instead of using:


background-color:
background-image:
background-repeat:
background-position:


it's condensed so respectively to the code above this is how it would look...



background: transparent url(something.jpg) no-repeat 0 0;




background: #000000 url(something.jpg) no-repeat 10px 20px;




background: #000000 url(something.jpg) repeat-x left bottom;


the way the position works is... x and y position from the upper-left


... no-repeat x y


you can replace the number w/ values such as, left, right, top, bottom, middle... that's the css lesson of the evening takes notes cause you'll be graded later :P :thumb:

[nj_jcarter]

that's the css lesson of the evening takes notes cause you'll be graded later :P :thumb:

That is not a bad idea. I'm gonna consult K.