How do you use CSS to place header tags just above a background image?

This is the image by itself:





Heres one that has been set up to display text just above it:



I would like to know how to do the same thing.




I put this in my css file (style.css)

h6.background{
background-image: url("images/volc_banner.gif");
background-repeat: no-repeat;
}


Here is what put on my index page to test to see if it would work any:


<h6 class="background">VOLCANOES OF THE NORTHWEST</h6>


Thanks

 

This might work:

h6.background {
background: url("images/volc_banner.gif") no-repeat top left;
width: 417px;
height: 62px;
padding: 10px;
}

Code (markup):

I based the width and height on the image you posted (volc_banner.gif).

 

Nope the image doesnt appear but it does make an invisible space in the area. but the text does show up

 

Hmm, that code is completely working for me. I just tested it now (FF 2.0, and IE 6.0).

Make sure the image is in the images folder

 

try using this code

h6.background {
background:#CCC url("images/volc_banner.gif") no-repeat top left;
width: 417px;
height: 62px;
padding: 10px;
}

Code (markup):

if you see a gray box background, then the image may not be in the proper place.

 

The image is in there, is it

top left

or

top-left;

 

maybe its because im using I.E 7.0

 

Ahhh there is a gray box.. Oh boy...

 

Yay! Thanks glorie for setting me on the right track!

For any one that has the same problem. I found a solution. All I needed to do was put ' ../ ' infront of "images/volc_banner.gif") as I was working in another folder (called style.ccs) so by putting ../ it tells the CSS to go outside of the folder of the file your working in and into another one. I'm glad that I am learning by hand-coding with only notepad . Oh heres the code:

h6.background {
background: url("../images/volc_banner.gif") no-repeat top left;
width: 417px;
height: 62px;
padding: 10px;
}