CODEWITHSUNDEEP
htmlcssbackground-image
sldk
sldk

Reputation: 374

Apply background-image and custom bullet to css heading

So my <h1>'s should have individual custom pattern backgrounds and individual image bullets in front of them. The problem is, that I can't apply both style-elements as background-images (I've heard you can have several bg-images with CSS3? But I want to try a more cross-browser compatible 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 doing something like this to get the bullet image in front of <h1> in css:

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

I could just add another div around my <h1>'s and apply the pattern on that, and the bullet direcly on the <h1>. Is there another smarter way to achieve my desired effect though?

Thanks!

Upvotes: 3

Views: 1458

Answers (1)

iConnor
iConnor

Reputation: 20209

Yes, before & after will NOT work unless content is there,

you could do it like this also 

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

Upvotes: 2

Related Questions