CSS puzzle: how to add background image and set height / width to blank space?

Question

I set background-image to a couple of span elements, but they are not displayed, I think, because my height and width settings are ignored.

HTML source:

 <div class="textwidget"> <a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a> <a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a> <a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a> </div> 

CSS

 span.sidebar-poster { margin-bottom: 10px; background-repeat: no-repeat; width: 160px; } span#starthere { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg); height: 285px; } span#starthere:hover { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg); } span#primarydocs { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg); height: 285px; } span#primarydocs:hover { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg); } span#donate { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg); height: 285px; } span#donate:hover { background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg); } 

None of the background images are actually visible.

In the Chrome Developer Tools, under the Computed Style section, these two spaces have a background image. If I copy and paste the URL of this image, I see the image. But nothing really does.

[UPDATE - this part has been resolved, thanks] In the Chrome developer tools, according to the agreed rules, only the #starthere and #donate actually dial the background-image attribute. Mileage #primarydocs - no. Why not?

Answer 1

SPAN is an inline element. Which really will ignore such things. Try adjusting the display mode in CSS as follows: display: block;

Answer 2

I think your span should have display:inline-block , the normal range will always have its "natural" width and height.

Answer 3

Since a is display: inline; automatically, it cannot accept width and height attributes from CSS.

If you want to use the inline attribute but without internal content (i.e.: <span> content </span> ) and have a background image instead, use padding instead.

t

span { padding: 10px; }

but enter the number of pixels that you will need to display.

Answer 4

Solved - you cannot set height and width to span because it is an inline element. Switching to a div solved it.

Phew

If anyone knows how to debug CSS with better tools than guesswork, hope, google searches and swearing, please let me know!