CODEWITHSUNDEEP
htmlcsssprite
Joshua L
Joshua L

Reputation: 65

css sprites not displaying

.comments 
{
    clear: both;
    background: url(./img/icons.png) 105px -230px no-repeat;
    width: 50px;
    height: 50px;
}

<div class="index-tools">
    <span class="comments"><?php comments_popup_link( __( '0', 'html5blank' ), __( '1', 'html5blank' ), __( '%', 'html5blank' )); ?></span>
    <span><?php edit_post_link(); ?></span>
</div>

image not showing,I dont know why. I tried .comments a{...},still not working. I checked the path using 'Inspect Element',it's showing up,so I guess the path should be right.

what is wrong??

Upvotes: 0

Views: 2542

Answers (2)

Mr Lister
Mr Lister

Reputation: 46629

width and height on a span won't work, because a span is an inline element. Unless the PHP fills the span with some content, it won't have a size and you won't see anything.

So I'd suggest you make it into a inline block.

.comments 
{
    clear: both;
    background: url(http://i43.tinypic.com/10psj2s.png) -105px -230px no-repeat;
    width: 50px;
    height: 50px;
    display:inline-block;
}

See jsfiddle.

I simulated some output from the PHP there, so the text is displayed over the background image, but I guess you'll need to fine-tune that.

Edit: if you want a single rectangular area from a large graphic, the positions must be negative, since you're sliding the graphic up and to the left from its normal location. Otherwise, the large graphic ends up somewhere else than the element it's the background for.
Positive positions would work if you'd be repeating the background.

Upvotes: 2

Manoj Yadav
Manoj Yadav

Reputation: 6612

May be background position getting overridden by other css try !important like below;

.comments 
{
    clear: both;
    background: url(http://oi43.tinypic.com/10psj2s.jpg) 105px -230px !important;
    width: 50px;
    height: 50px;
    display: block;
}

js fiddle

Upvotes: 0

Related Questions