How to: add background image to button

Hi all

I have a demo here to illustrate.

It’s just a simple <ul> list containing <a> links.

In each separate button I need to have a different graphic (the down arrow)

In my example I’m doing it with a span in the <a> tag.

I’m giving the span dimensions, positioning it and adding a background image using a sprite.

My question is, is it possible to do this without the span.

I’m creating this navigation in Wordpress and adding the span would be difficult.

On a side note I tried to center the span (in this example) in button by positioning it absolute and giving it a left:50% but it doesn’t appear in the center. Anyone know why.

If you are going to use a sprite image, you need some containing element like a span with dimensions. The way to (almost) center it is with the extra line in red:

nav li a span {
position: absolute;
left: 50%;
bottom: 15px;
display: block;
width: 13px;
height: 7px;
[COLOR="#FF0000"]margin-left: -7px;[/COLOR]

I say “almost”, because it’s 13px wide, so the margin can’t quite be half its width.

Thanks ralph.m I thought I needed a containing element with dimensions but I wanted to check.

I if didn’t use a sprite but a separate image for button I could add it to the background and position it couldn’t I ?

Yes. :slight_smile: