I can’t get CSS “background position” to focus on a specific part of the image, I set the position and can load all the images, but the specified area is not displayed. I have written this code so far to no avail:
<head> <style type="text/css"> ul#links { list-style: none; } ul#links li a{ float: left; padding: 40px; background: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png') no-repeat; } #customlink { width: 24px; height: 24px; background-position: -0px -0px ; background-repeat: no-repeat; } #rss { width: 24px; height: 24px; background-position: -24px -0px; background-repeat:no-repeat; } #facebook { width: 24px; height: 24px; background-position: -0px -24px; background-repeat:no-repeat; } #flickr { width: 24px; height: 24px; background-position: -24px -24px; background-repeat:no-repeat; } #twitter { width: 24px; height: 24px; background-position: -0px -48px; background-repeat:no-repeat; } #linkedin { width: 24px; height: 24px; background-position: -24px -48px; background-repeat:no-repeat; } #google { width: 24px; height: 24px; background-position: -0px -72px; background-repeat:no-repeat; } #foursquare { width: 24px; height: 24px; background-position: -72px -0px; background-repeat:no-repeat; } </style> </head> <body> <ul id="links"> <h2>Social Networks</h2> <li><a href="" id="customlink"></a></li> <li><a href="" id="rss"></a></li> <li><a href=""id="facebook"></a></li> <li><a href=""id="flickr"></a></li> <li><a href="" id="twitter"></a></li> <li><a href="" id="linkedin"></a></li> <li><a href=""id="google"></a></li> <li><a href=""id="foursquare"></li> </ul> </body> </html>
source share