Background-position doesn’t work in WordPress

  • fs_tigre

    (@fs_tigre)


    14 years, 3 months ago

    Hi,

    I’m trying to use this code inside a theme that I created but for some reason the background-position don’t work inside WordPress (background-image does work) but when I test it outside WP it works fine.

    Any Idea?
    Thanks

    #icons li a {
			text-indent: -999px;
			display: block;
			width: 77px;
			height: 77px;
			background-image: url("images/sprite.png");
}
#icons li a#twitter { background-position: 0 0px; }
#icons li a#twitter:hover { background-position: 0 -77px; }

#icons li a#myspace { background-position: -77px 0px; }
#icons li a#myspace:hover { background-position: -77px -77px; }

#icons li a#facebook { background-position: -154px 0px;}
#icons li a#facebook:hover { background-position: -154px -77px;  }

#icons li a#yfrog { background-position: -231px 0px;}
#icons li a#yfrog:hover { background-position: -231px -77px;  }

#icons li a#flickr { background-position: -308px 0px;}
#icons li a#flickr:hover { background-position: -308px -77px;  }

#icons li a#youtube { background-position: -385px 0px;}
#icons li a#youtube:hover { background-position: -385px -77px;  }
Viewing 3 replies - 1 through 3 (of 3 total)
  • Michael

    (@alchymyth)

    14 years, 3 months ago

    do you actually have these links with the id in your html code in wordpress:
    for instance: <a href="" id="twitter" >..</a> or similar?

    or have you tried: #icons li a:hover { background-position: -77px -77px; } ?

    a link to your site would help to be more specific 😉

    Funkphenomenon

    (@funkphenomenon)

    14 years, 3 months ago

    This has nothing to do with WP, there is probably another line somewhere in your CSS that overrules your lines. Try looking with the Firefox Firebug extension to see what’s happening.

    Thread Starter fs_tigre

    (@fs_tigre)

    14 years, 3 months ago

    SORRY! You are right, my html code was wrong.

    Thanks

    BEFORE: WRONG!

    <ul id="icons">
  <li id="twitter"><a href="http://twitter.com/" target="_blank"></a></li>
  <li id="myspace"><a href="http://myspace.com/" target="_blank"></a></li>
  <li id="facebook"><a href="http://facebook.com/" target="_blank"></a></li>
  <li id="yfrog"><a href="http://yfrog.com/" target="_blank"></a></li>
  <li id="flickr"><a href="http://www.flickr.com/" target="_blank"></a></li>
  <li id="youtube"><a href="http://www.youtube.com/" target="_blank"></a></li>
 </ul>

    AFTER: CORRECT

    <ul id="icons">
  <li ><a id="twitter" href="http://twitter.com/" target="_blank"></a></li>
  <li ><a id="myspace" href="http://myspace.com/" target="_blank"></a></li>
  <li ><a id="facebook" href="http://facebook.com/" target="_blank"></a></li>
  <li ><a id="yfrog" href="http://yfrog.com/" target="_blank"></a></li>
  <li ><a id="flickr" href="http://www.flickr.com/" target="_blank"></a></li>
  <li ><a id="youtube"href="http://www.youtube.com/" target="_blank"></a></li>
 </ul>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background-position doesn’t work in WordPress’ is closed to new replies.