4 Replies Latest reply: Apr 11, 2012 10:33 PM by Seaside333 RSS

    Moving CSS Image Sprites On A Site

    Seaside333

      I am using a rollover pure css image sprite on a site.

       

      I was wondering how you would move them around, so you can wrap text around them? Basically treat the sprite like an image.

       

      Thanks

       

      Here is the CSS for the sprite I am using for the sprite:

       

      a.image_sprite:link, a.image_sprite:visited {

          display:block;

          width:310px;

          height:259px;

          text-indent:-9999px;

          background-image: url(assets/image_one.jpg);

          background-repeat: no-repeat;

          background-position: 0 0;

       

      }

      a.image_sprite:hover, a.image_sprite:active {

          display:block;

          width:310px;

          height:259px;

          text-indent:-9999px;

          background-image: url(assets/image_one.jpg);

          background-repeat: no-repeat;

          background-position: 0 -259px;

          font-family: Arial, Helvetica, sans-serif;

      }

       

       

      Here is the sprite inside the html with text that i want to wrap around it:

       

      <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p><p><a href="#" class="image_sprite"></a></p>

        <p>Lorem ipsum <br/>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla suscipit varius sem, ac tincidunt dolor egestas sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Cura</p></div>