How to use sprite image in css?


Tags: html,css,image,sprite

Problem :

The problem :

I currently have this HTML :

<div class="bx-controls-direction"><a class="bx-prevs" href="">Prev</a><a class="bx-nexts" href="">Next</a></div>

... and this CSS :

.bx-prevs{right: 15px!important; background:url("http://localhost/assets/images/mobile-sprites.png")10px 10px no-repeat !important; background-repeat:no-repeat}.bx-wrapper .bx-prevs{left:10px;background-position:0 0}.bx-wrapper .bx-nexts{right:15px;background-position:-41px 0}.bx-wrapper .bx-prevs:hover{background-position:0 0}.bx-wrapper .bx-nexts:hover{background-position:-41px 0} 

... and this Sprite image :

http://postimg.org/image/lg3bnrowt/

My question :

How do I calculate top ,right, bottom,left from sprite images

I'm new to CSS, so please be kind...



Solution :

Check this snippet It will help you. Change the background position only

body{background:red}
.bx-prevs{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -1px -1px;}
.bx-nexts{display:block;width:27px; height:25px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -32px -1px;}
.b-nexts{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -65px -1px;}
.b-prevs{display:block;width:24px; height:23px; background:url('http://i.stack.imgur.com/LA9lY.png') no-repeat -94px -1px;}
<div class="bx-controls-direction"><a class="bx-prevs" href=""></a><br> <a class="bx-nexts" href=""></a>
<br> <a class="b-nexts" href=""></a>
  <br> <a class="b-prevs" href=""></a>






</div>

enter image description here


    CSS Howto..

    How to make div 10% of device screen height css

    Using CSS, how can I make my document expand to the user's viewport if the content doesn't scroll?

    How to use Google Libraries API (jQuery) with Google App Engine?

    How to style default confirm box with only css?

    How to display thick line under header of sub menu using css

    How to override a link tag with another in css

    how to apply CSS for @Html.DisplayFor?

    How to add hover effect to menu using jQuery

    How to add padding to the outside of an input in css

    How to make header cover entire page length?

    How to repeat a CSS shape horizontally?

    How to add css to form elements if attribute class is already being used in Jquery

    How do you ad stylesheets to JSDOM

    Show nav once the nav has been hidden

    How to make the HTML colors of a Bootstrap design edge-to-edge

    How do i make a flexible div with a background in css

    How to force CSS @media style from JS regardless of screen size?

    How to put Facebook and Twitter buttons next to each other?

    How to remove a css class using jquery in a certain screen size

    How to fix an overlapping image in CSS?

    How to change the css style for phone and desktop?

    How to vertically and horizontally center two images inside a div on a responsive page

    How to set body attribute in css using angularjs?

    How to keep the navbar fixed to top in big screens only using jquery

    How to make all input boxes ordered in a straight line? [closed]

    How to move a div up and down infinitely in CSS3?

    how to prevent link padding during hover from extending paragraph padding

    How to create css based breadcrumb which supports IE8 [closed]

    How to scale div from jquery css

    Duplicated footer html/css on another page, but shows up differently?