Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background-position not working for CSS sprites

Tags:

html

css

sprite

I can't get the "background-position" CSS to target a specific part of the image, I've set the position and can get all the images to load but the area specified does not show. 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>
like image 213
Jose Handras Avatar asked Sep 09 '11 10:09

Jose Handras


People also ask

Which CSS property is used to change the position of the background image?

The background-position property sets the starting position of a background image. Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

What is background-position center in CSS?

background-position: center top;: This property is used to set the image at the center top position. Example: This example illustrates the use of background-position property where the position value is set to the center top position. HTML.

How do I center a background in a div?

For center or positioning the background image you should use background-position property . The background-position property sets the starting position of a background image from top and left sides of the element . The CSS Syntax is background-position : xvalue yvalue; .


1 Answers

Due to ul#links li a being more specific than for example #facebook, the background rule inside ul#links li a is overriding the background-position on #facebook.

Splitting background into background-image and background-repeat is a simple fix:

ul#links li a{
    float: left;
    background-image: url('http://static.tumblr.com/wgijwsy/ixYlr91ax/sprite_colored.png');
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}
#facebook {
    background-position: -0px -24px;
}
like image 190
thirtydot Avatar answered Oct 12 '22 15:10

thirtydot