Background position

Hi all,

I am trying to create a header with black background and then a little arrow coming out at bottom, problem is Im not sure how to position the arrow at the bottom of the header? would this be easier using absolute position?

here is a page i was working on, the right image is the way I would like the left effort to resemble.

anyone any suggestions on how I can achieve this effect?

Thanks in advance!


Gosh darn it, you’re right :blush:
I was going to use a span at first, and then remembered that putting a margin on an inline element is asking for trouble - didn’t think about putting padding on the outer element…

Steve beat me to it, however remember headers contain only inline elements.

Thanks guys, great advice!

You could do the absolute positioning thing (make the arrow a child html image and set top to 100% and left to whatever) but since it looks decorational to me, I’d maybe do something like


set the spike as a background image of the h2, who also has bottom-padding = to the height of spike. If there are other h2’s without spikes, then keep all the other h2 styles to the h2 and just give the black background to the span, but if they all have it, then take all the styles you’ve set and move them over to
h2 span {}
instead. Or mix and match, depending on your situation.

I’m trying to think of a way to do it without the span, but the black background of the h2 will otherwise cover either side of the spike.

Thinking out loud (I haven’t check these out), I can see two possible options.

1. <h2><div>Heading</div></h2>
then in the css:
h2 {background: #f2f0f0 url(spike.jpg) no-repeat 5% 100%;}
h2 div {background: #000; margin-bottom:6px;}

2. Make spike.jpg as wide as the widest possible heading, with a grey stripe across the whole width and then a black spike where you want it to be. Position it bottom left, no-repeat, and add an extra 6px to the padding at the bottom.

WOW thanks Stomme! youve put a smile on my face! :slight_smile:

Well, or you coulda inline-blocked it for vert margins I suppose… : )

Off Topic:

BTW Kyle, I wanted to say I think you’ve got a great design eye… your portfolio looks jawsome!