Applying a background image and custom marker to a css header

So mine <h1>

should have individual template backgrounds and separate image slugs in front of it. The problem is that I cannot apply both style elements as background images (I heard that you can have multiple bg images with CSS3, but I want to try a more cross-browser way for now.)

HTML:

<div id="content">
<h1>Heading</h1>
<p>Paragraph</p>
</div>

      

        
        
        
      

    

CSS

#content > h1 {
background: url("heading-bg.png") repeat; 
padding: 25px 0 25px 80px;
}

      

        
        
        
      

    

Now I tried to do something like this to get the image of the bullet in front <h1>

in css:

#content > h1:before {background: url("bullet1.png") no-repeat left;}

      

        
        
        
      

    

I could add another div around mine <h1>

and apply the template to it and the bullet to it <h1>

. Is there an even smarter way to achieve the desired effect?

Thank!