CODEWITHSUNDEEP
cssbackground-imagebackground-position
rowanwins
rowanwins

Reputation: 253

css background image clip

Im setting my image src in php and controlling the styling in css. I have an image sprite but no matter what I do the image does not seem to clip to the area I want. Im just getting the whole image appear dispite my background-size being set to 24 by 24px.

Note that the img src has to stay in the HTML rather than moving to a bg-image in the css :)

A jsfiddle can be seen here jsfiddle.net/s6UnV

Any ideas?

#swap li img {
    background-position: 0 0px;
    background-size: 24px 24px;
    display: block;
    text-indent: -10000px;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
}

#swap li img:hover {
   background-position: 0 -24px;
}

Upvotes: 1

Views: 1915

Answers (1)

Lucas Lazaro
Lucas Lazaro

Reputation: 1526

You shouldn't use the tag img for sprites, you should use a div with a background-image to the one you would like to add the sprite effects.

I updated your jsFiddle here Updated jsFiddle

What i did was the following

Changed the Html to

<ul id="swap">
  <li>
    <a href="www.google.com" target="_blank">
       <div class="fb-sprite" style=" background-image:url('http://rldesign.net/Joomla3/modules/mod_social_css3/assets/glyph/facebook_hover.png')">
      </div>
    </a>
  </li>
</ul>

And added the fb-sprite class style to the css

.fb-sprite{
    width:24px;
    height:24px;
    background-position: 0 0px;
    background-size: 24px 48px;
    display: block;
    -webkit-transition: background-position .6s;
    -moz-transition: background-position .6s;
    -o-transition: background-position .6s;
    -ms-transition: background-position .6s;
    transition: background-position .6s;
    }

.fb-sprite:hover{
   background-position: 0 -24px;
    }

Hope it helps

ps: you can also use the opacity effect on this one so the facebook logo doesn't disappear out of the blue, just a suggestion.

Cheers.

EDIT: Now you can change the url of the img programtically and the style would work. Also Updated the jsFiddle

Upvotes: 3

Related Questions