I have the following code:

Code:
#section_box {
padding: 0px;
margin: 0px;
}

#section_box h3 {
background: url(images/box_headline.gif) repeat-x;
color: #FFFFFF;
font-size: 11px;
display: inline;
height: 18px;
padding-left: 2px;
padding-right: 2px;
}
I'm trying to style a h3 tag inside of #section_box, however i'm having some issues displaying the background graphics correctly. If I don't use display: inline on my h3 tag, the background will display correct height wise, however it will not wrap around the text, but just repeat itself for a long width.

Adding display: inline, makes the h3 wrap around my text, however the height seems to be ignored, so I can only see part of the background which is wrapped around the text., the bottom is to say, cut off because of the wrapping.

I'm wondering what would be the right approach for this?