CSS Forum

**ajaydand65** · 02-18-2009, 07:44 AM

Hi,

Please take a look at this: http://www.ninesec.com/newweb/index.html

I am trying to set backgroung-image for < H3 > tag, using CSS, but the image won't show in the page. The image is at correctly referenced location (http://www.ninesec.com/newweb/Images/v1/HeadingBG1.png ), but it refuses to show on page.

Thanks in advance for any help.

Ajay.

**Muzz** · 02-18-2009, 09:24 AM

Hello,

If I am right, that would be this container: <h3>A great network is like a great cloud. It simply rains. — Prof. Sivakumar, IIT Mumbai.</h3>

But your HeadingBG1.png comes out very rare:

Try to make your image transparant before continueing. Thanks

Oh and make sure the path of the css is right with background('images/v1/HeadingBG1.png')

**ajaydand65** · 02-18-2009, 11:07 AM

Hi Muzz,

Thanks for the help. However, I'd like to know what changes you made? I was trying the following in my css:

h3 {
background: url(Images/v1/HeadingBG1.png);
.....
}

I tried putting the path within single / double quotes, using ../ in the path, and all other tricks that I could think of, but it won't show!

Are you suggesting I use background('images/v1/HeadingBG1.png') directly in the heading? However, I would like to use CSS. Is what you suggest valid CSS?

Thanks for the help.

Ajay

**LadynRed** · 02-18-2009, 12:02 PM

Quote:

I tried putting the path within single / double quotes

Quotes are completely UNnecessary, makes no difference whatsoever.

I also noticed that you have not defined a background color on the <body>. You need to get into the habit of doing so. My default system BG color is NOT WHITE, so what I see on your site is everything sitting on top of a PINK background.

You may have a specificity issue. Try preceding your .tabbed_box h3 class with #content_1 .tabbed_box h3.

**ajaydand65** · 02-18-2009, 01:27 PM

@LadyNRed: Since this is still work in progress, I have not yet finalized on the body color. I tried specifying the section from .tabbed_box to .content (since that is the div where the h3 is). Even tried giving #content_1, but no, it simply won't show. The funny thing is, all the other style is still applied irrespective of what section it is named as, except the background-image. (If I comment out the relevant section, the H3 takes the default body style).

The graphics and pictures are also work in progress, hence they would surely be improved upon, before the final version is out for public display.

Thanks for all the suggestions. Awaiting a proper "valid CSS" resolution for this. Sorry if this issue is trivial, but I'm still at the bottom of the learning curve.

**LadynRed** · 01:40 PM

I found it - your path is wrong.
You need to change it to :
background-image: transparent url(../Images/v1/HeadingBG1.png) no-repeat;

When I went it view the bg image, the path came up as styles/images/v1/headingbg1.png - clearly incorrect. Once I changed it as above, it showed up.

**ajaydand65** · 02-18-2009, 01:37 PM

@ LadynRed: Does the order of the div section in the CSS file make a difference? I understand that because it is Cascaded Style Sheet, any style defined for a particular class of element would be inherited, and hence the order would matter. But in my case would it matter if I try this:

<body>
<div class="d1">
...
<div class="d2">
<h3>ABCD</h3>
</div>
...
</div>
</body>

<style>
.d2 {
font-family: ....
....
}

.d2 h3 {
font-weight: ....
font-size: ....
}

.d1 {
font-family: ....
....
}
</style>

**ajaydand65** · 02-18-2009, 02:15 PM

@LadynRed: Hey, you're turning out to be quite a savior! Thanks a lot. But funnily, I do remember giving that (putting the preceding ../ ) a shot sometimes before, since I've been fiddling around with this issue since quite some time. It turned out right this time around. Thanks a lot again. And yeah, the graphics are still shabby... lotsa work to do. :-)