h1 image appearing above h1 text

[jppp]

I want to have a small inage next to my h1 text and want to use css for the same. I did not want to use a code like <a href="http://"><img src = "image.jpg"></a><h1>heading</h1>

I used the following code in my css file.

h1#newrepl {
    padding-top: 40px; /* height of the replacement image */
    height: 40px;
    width: 550px;
    font-family: Brush Script MT;
    font-size: 36px;
    text-align: center;
    overflow: hidden;
    background: transparent url("h1Image.jpg") no-repeat;
}

and am writing this code in my files.

<h1 id="newrepl">h1 text goes here</h1>

My text is appearing below the image and not next to the image. Where am I going wrong.

[ralph.m]

The code you have there doesn't seem to match your intention. If you want a small image next to your H1 text (say on the left) then give the H1 some left padding and place the image as a background image on the H1 and position it inside the left padding area.

E.g.

h1 {
  padding-left: 40px;
  background: url(image.gif) no-repeat 0 50%;
}

[jppp]

Thanks a lot, Ralph. I am getting exactly what I want now. I also aligned the text to the lleft in my code and now the h1 text is aligned right next to the image. As I newbie, I had just copied the code from one of the tutorials and was trying to tweak it to suit me.