How do I make this image stretch horizontally

Question

So the banner I made at the top of the page is too short horizontally. I already tried adding "width: 200%;" to the CSS but it only made the space around the image bigger, not the image itself. Please help.

The banner is the giant purple one at the top of this page: http://www.neopets.com/~ellenore

ps please don't make fun of my love for neopets. xD

}
h1 { .left
width: 200px;
margin-left:0px;
margin-right: 0px;
margin: -8;
letter-spacing: -1px;

}

<h1>
<img src="image is here">
</h1> 

Answer 1

If you change your H1 tag to:

<h1 style="
    width:100%;
    height:288px;
    background-image: url('http://i60.tinypic.com/rse735.png');
    display: inline-block;">
</h1>

Then your image will automatically repeat. However, as it stands your image doesn't repeat too well. So, you'll probably want to edit in your photo editing s/w.

I'd recommend not stretching your image as it won't look very good.

Also, you may want to create your "Shaggy Little Lion" text as a separate graphic which can be centered on top of the image below.