jppp — 2012-03-10T07:00:50-05:00 — #1
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.
padding-top: 40px; /* height of the replacement image */
font-family: Brush Script MT;
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.
ralphm — 2012-03-10T07:08:18-05:00 — #2
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.
background: url(image.gif) no-repeat 0 50%;
jppp — 2012-03-10T12:33:27-05:00 — #3
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.