Need Help with Template Header Image

I have a custom blogger template that has an image background for the post header shown here:



As you can see, the text doesn't fit into the image. There is a mouseover, but how many people are actually going to do that?

What I would like to do is increase the image height and make the text wrap inside the image, or if that isn't possible, make the image width fluid.

Here is the code for the post header AND the div code. TIA!

.post h3 {
width: 496px;
line-height: 32px;
margin: 0px 0 0 0px;
text-align: left;
padding: 3px 0px 5px 40px;
position: relative;
font-size: 1.6em; /* Post title */
background: url([url]http://3.bp.blogspot.com/_WoCJXgXotb8/Ssw3ojxC4KI/AAAAAAAAAkc/Mhv3mWFlL3k/s1600/post_header_bg.jpg[/url]) left top no-repeat;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #fff;
}
.post h3 strong, .post h3 a:hover {
text-decoration: none;
color: #B43C00;
}

Code (markup):

***

<div class='post-header-line-1'/>

 <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Code (markup):