Home/ Questions/Q 8010453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T18:44:18+00:00

I try to get css sprite working on my page. but if I adds

  • 0

I try to get css sprite working on my page. but if I adds background-repeat:no-repeat. then the css sprite stops working. If I remove it from my stylesheet, will work again.

I couldn’t figure out why I cannot use background-repeat.

here’s my code. I also upload it to jsfiddle, you can test it there.

http://jsfiddle.net/F49b5/2/

        <html>
        <head>
            <style type="text/css">
                #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on
                {
                    background-image: url("http://i14.photobucket.com/albums/a332/007bond-jb/food/burger2.jpg");
                    overflow: hidden;
                    background-repeat: no-repeat;  /*this is the problem, remove it, it will work */
                }
                #logo a, .vote-up-off, .vote-up-on, .vote-down-off, .vote-down-on, .star-on, .star-off, .flag-off, .vote-accepted-off, .vote-accepted-on
                {
                    font-size: 1px;
                    text-indent: -9999em;
                }

                #logo a
                {
                    background-position: 0 194px;
                    width: 309px;
                    height: 133px;
                    display: block;
                }
            </style>
        </head>
        <body>
            <div id="logo">
                <a href="/" title="test">test</a>
            </div>
        </body>
        </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try switching your background-position to -194px instead of 194px:

    #logo a
{
    background-position: 0 -194px;
    width: 309px;
    height: 133px;
    display: block;
}

    By setting the y-axis to 194px, it will push the background image down 194px, which is out of the view of your #logo height. Instead, you’ll want to “pull up” the image by setting the y-axis to a negative number.

    • 0