A Element Not Showing Background Image

I am trying to add a backgroung image for a 'a' element, but it would only show part of the image ( so if I have Home as value, whatever space home takes that is what is shows of t

Solution 1:

<a> is an inline element. Inline elements cannot have a set width and height.

You therefore need to change the display mode of the element using the CSS property display.

Use display: block; if you want your elements to be taken out of the flow of text and considered a block (ie.: stacked vertically, one block per line).

Use display: inline-block; if you want your element to behave like an inline element position wise but have block-like properties.

Note:inline-block is supported by IE6 on <a>. In IE6, inline-block display style is only supported on elements which has an inline default style.

Solution 2:

Add display:block; to the anchors (block vs inline-block). Once you do that though, you may need to float:left; the anchors to keep them side-by-side. If you go that route, follow them all up with a clear:both; div.

a.box  { float:left; width:100px; height:25px; margin:08px; }
.clear { clear:both; }

<ahref="#"class="box">Foo</a><ahref="#"class="box">Foo</a><ahref="#"class="box">Foo</a><divclass="clear"></div>