css - displaying part of an image with jquery -

i doing visualization, , calculations can return fractions (e.g. 23.43, 4.3, 39.79,...). need show icons every integer in result (e.g. 23 -> 23 icons, 4--> 4 icons, 39 --> 39 icons).

now should break icons of fraction part, maybe in decimals, possibly down quarters. e.g. 23.43 --> 23 icons , 0.4 (or 0.5 if quarters) of horizontal part of icon, 4.3 --> 4 icons , 0.3 (or 0.25) of x part of icon, 39.79 --> 39 icons , 0.8 (or 0.75) of x part of icon, , on.

how this? saw approaches using backgrounds css, doesn't need. i'd prefer jquery way of doing it.

edit: here image of trying do

i set image background-image of <div>, , set width multiple of image's width (eg. 23.4 * width) , background-repeat repeat-x.

if refuse usage of background, set overflow hidden , use loop in js document.createelement specified number of images inside div. way, last 1 can 'half-visible' overflow.

edit:

in order solve this, need set line break. example, seeing image 21px wide, let's maximum number of images in 1 line 20 (840px wide).

let's then, need place 75.5 images.

first, create div width of 840px , put 75.5 - (75.5 % 20) images there. should create 3 rows of images. put rest (75.5 % 20 = 15.5 => 16 images) in new div width of 15.5 * 21 px , overflow hidden in previous case. again, last 16th image half visible.

edit 2:

if width of images varies, there can new technique: use 1 div fixed width like. put images it. add new div after last image opaque background in colour of pages's:

http://jsfiddle.net/qtb8t/1/

html:

<div id="wrapper">     <div id="overlay"> </div> 

css:

#wrapper {      background: blue;     width: 700px; } #overlay {     background: blue;     display: inline-block;     position: relative;  } 

js:

var count = 75.5,     ceil = math.ceil(count),     image = 'http://jsfiddle.net/img/logo.png',     overlay = $('#overlay'),     wrapper = $('#wrapper'),     hide = ceil - count;  for(var = 0; < ceil; i++) {     var img = document.createelement('img');     img.src = image;     wrapper.prepend(img); }  overlay.css({     'width': img.clientwidth,     'left': -img.clientwidth * hide,     'height': img.clientheight, });