Image background problems

I need a second pair of eyes here. Im trying use a background image for a div rather than using the <img> tag because the picture is not a link and therefore is not considered content but rather presentation. I also set the background color to white as I need to do this for proper display. When I do this, the background image disappears, and when i remove the background color, the background image shows up again. Very strange. Has to be a tiny mistake I'm not seeing. Here's the relevant code. Can anybody help?

<div id="generalContentNst">
<div class="TitleBg">
<img src="/images/nstTitle.gif">
</div>
<div id="solutionsNav">
<img src="/images/nstDescrip.gif"/>
<ul>
<script language="javascript">
subNav();
</script>
</ul>&nbsp;
</div>
<p id="generalContentSolutionsNst">A Dragon NST (yadda yadda.....
</p>
</div>

#generalContentNst {
background-image: url(/images/dragon.jpg) no-repeat;
background-color: #FFFFFF;
border-bottom: 1px solid #006;
}

.TitleBg {
background: #006;
padding: 6px 0 4px 335px;
}

#generalContentSolutionsNst {
padding: 16px 25px 20px 350px;
line-height: 20px;
color: #000;
text-align: justify;
background: #FFF;
}

#solutionsNav {
background: #39C;
height: 25px;
}

 

It wasn't obvious at first, but this line is your trouble:

background-image: url(/images/dragon.jpg) no-repeat;

Code (markup):

You can't specify no-repeat in the background-image - only background-image. no-repeat should be specified in background-repeat. Or you can combine everything using shorthand:

#generalContentNst {
background: #FFFFFF url(/images/dragon.jpg) no-repeat;
}

Code (markup):

 

yes, good eye, but i did originally have it as

background: url(/images/dragon.jpg) no-repeat;
background: #FFFFFF;

which is acceptable

And that didn't work, and unfortunately, the snippet you gave me doesn't appear to work either.

I also tried to split all three specs out

background-repeat: no repeat;
background-image: url(/images/dragon.jpg);
background-color: #FFFFFF;

And that doesn't work either. Weird.

 

I worked up a test page with the shorthand background property and your divs, which worked fine. Can you post the complete html and css that you're using? Perhaps there's something up with the doctype, or another syntax error.

 

This bit of code doesn't work because you're overwriting the background property and just showing a white background:

background: url(/images/dragon.jpg) no-repeat;
background: #FFFFFF;

Code (markup):

KatieK's suggestion should work. Can we see a live page of what's going on?

 

Well, for the sake of brevity and not cluttering the forum, here's the page. This should show you what you need and should show you the linked style sheet. All objects come first and then classes. All in alphabetical order for easy reference

Thanks !!!

http://www.comh.com/solutions/solutionsNSTtest.asp

For reference on how I would like it to look, here's the real, live, non test page where I'm still using image tags with floats (the wrong way to do it) instead of background images.

http://www.comh.com/solutions/solutionsNST.asp

 

So, here's what you need to add to the #generalContentSolutionsNst declaration in your stylestest.css file:

background: #FFFFFF http://www.comh.com/images/dragon.jpg top left no-repeat;

Code (markup):

Notice that that ID is not the one that you have the dragon.jpg image specified on now.

#generalContentNst {
background: #FFFFFF url(/images/dragon.jpg) no-repeat;
border-bottom: 1px solid #006;
}

Code (markup):

 

Yes, you are correct, but the id you are specifying, #generalContentSolutionsNst, is the text, and therefore the image will show up in the background of the text, which is not what I want if you review the second link I gave to the live page that looks the way I want it to look. I'm replacing image tags that have floats with the more appropriate background image technique.

This is such a strange problem. Usually I can figure it out but I'm blind on this one. I don't like to waste people's time unless I am completely exhausted, and I am. These are times when I become tempted to resort back to good old tables, but I refuse to do that.

 

OMG !!!

Hey codyrockx and KatieK, I found the answer and you're not going to believe it. How weird.

In my parent div, #generalContentNst, I specified a white background. This was also the div with the background image. This is correct and what I wanted. However, in my child element, #generalContentSolutionsNst, which is a paragraph nested within #generalContentNst and where you see the text, I also gave it a white background. As soon as I removed the white background spec on the child paragraph, but kept the white background for the parent div, the problem magically disappeared.

How weird !!!

But that's still not enough for me. I need to know why this was a problem. Do any gurus know what rule I was breaking? I've read advanced books and I've never heard of a rule where nested background color specs can make a parent background image disappear. Any thoughts?

This appears to be a great, obscure lesson not commonly found in books.

 

yes indeed. Your code did seem to be working, and infect i tested a sample from your code too. It did work for me. So i would also like to know the cause or the reason behind this problem?

 

Yeah. Anyway, if a background image ever disappears when you apply a background color to the same element, check any children for a redundant background color spec. Weird. And it happened in both IE and FF, so it's not a browser quirk. I've read an advanced css book that dedicates two entire chapters to quirks, debugging and workarounds, but not one mention of this. I wonder if it should be logged somewhere.

 

So there's a div with a background image, and a paragraph with a background-color inside that div?

It seems pretty reasonable to me that the background-color on the paragraph would override the div. The paragraph is transparent by default, and 'on top of' the div. If you give the paragraph a background-color, then that would 'knock-out' the div's background-image for all the space that the p occupies.

 

There is a parent div which spanned the width of the page. In the div was the background imge to the left and top (default values. Then, they are child divs and paragraphs within that. All of these have a left margin to send them to the right of the picture, rather than overlapping it. I had a background imge in the parent div, AND I had a white background for the whole parent div. I also had a white background for the child paragraph, but this shouldn't have affected the parent div, because again, the paragraph was not on top of the background pic and had a left margin keeping it completely away from the parent div background image. So this shouldn't be any problem at all based on every spec and theory I knew. But, strangely enough, when i removed the unnecessary background color for the child div, it cured the problem. Sure it was redundant and it was a leftover spec from things i was trying, but that shouldn't be a problem when the child paragraph does not covered the background pic of the parent at all. If you look again, you'll see what I mean

www.comh.com/solutions/solutionsNSTtest.asp

I want to know the rule that made this obscure behavior happen, and I can't figure it out for the life of me.