CODEWITHSUNDEEP
javascripthtmlcssspritecss-sprites
Nagendra Rao
Nagendra Rao

Reputation: 7152

control sprite image coordinates with variables in css

I want to control sprite image coordinates in css using variables..

background: url('sprite.png') no-repeat -123px -321px; width: 23px; height: 22px;

what I want is to be able to use the above line of code using variables,

background: url('sprite.png') no-repeat -X -Y; width: 23px; height: 22px;

so that I can set my X and Y on the fly.

PS: I'm trying to set length of lit stars from sprite according to my average-star-ratings which is a float number(like 3.1). I don't want to use LESS or Sass.

Upvotes: 0

Views: 530

Answers (2)

Sheric
Sheric

Reputation: 416

You can also do return the values with your server-side script with inline style:

<div style="background-position: <?php echo x . 'px ' . y . 'px'; ?>;"></div>

Upvotes: 1

Jesse Lee
Jesse Lee

Reputation: 1301

Use Javascript: 

var yourelement = document.getElementById('yourelementsid');

yourelement.style.backgroundPosition = x + 'px ' + y + 'px';

Upvotes: 3

Related Questions