html - Apply background-image and custom bullet to css heading -

html - Apply background-image and custom bullet to css heading -

so <h1>'s should have individual custom pattern backgrounds , individual image bullets in front end of them. problem is, can't apply both style-elements background-images (i've heard can have several bg-images css3? want seek more cross-browser compatible way 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 tried doing bullet image in front end of <h1> in css:

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

i add together div around <h1>'s , apply pattern on that, , bullet direcly on <h1>. there smarter way accomplish desired effect though?

thanks!

yes, before & after not work unless content there,

you

#content h1:before{ content:""; width:50px; height:50px; background:url('images/bullet.png'); }

html css background-image