how I styled the H1 with an image

I have the following problem, I have a h1 and I need to put an image in it, then the original image of 833 x 56, well I put it right through h1 with the following code <img src="images/h1.png"/> , it worked, however I did not I could put a text on it, unless I already put the text next to the image, and that's not what I want, then I made another code that is the following but I did not succeed, the intention with that code was to stay like this ! link but it looks like this! link What am I doing wrong?

<div id="left">
            <h1>séries</h1>
            <div class="center_left"></div>
        </div>
<style type="text/css">
h1 {
    position: absolute;
    top: 35px;
    left: 0;
    text-align: center;
    width: 833px;
    height: 56px;
z-index: 9999;
    background: url(../images/h1.png) no-repeat;
}
#left {
            position: relative;
            float: left;
            margin: 0 20px 0 0;
            width: 833px;
        }
.center_left {
            margin: 0 auto;
            width: 703px;
            height: 700px;
            border: 15px solid #d4d4d4;
            background-color: #ebebeb;
        }
</style>