CSS: two background images with position on one element

Question

In my css file i have one rule: two add two background images before and after text element. Before i used two images and all was ok. But now i use sprites: so i need to get area of big image and post it to element (background-position) but i have one trouble: if i set background position: i could not stuck to it position like left center and right center:

background: url(../images/png/elements.png) no-repeat -5px -152px, url(../images/png/elements.png) no-repeat -5px -104px;

how could i float first part to left and second to right of the element?

before was:

background: url(../images/png/mail.png) no-repeat left center, url(../images/png/edit.png) no-repeat right center;

is it real to do?

also: i use it with :hover

Answer 1

I'm afraid that it is not possible to limit the visible area of sprite images unless the size of the element itself is limited.

However, perhaps you could assign the background images to ::before and ::after pseudo-elements which are positioned to the left/right side of the parent box properly (either by float or absolute positioning).

So that you could handle the position of each icon interdependently.

For instance:

.box:before, .box:after {
  content: "";
  display: inline-block; /* or position these elements by floats, etc. */
  width: 48px;           /* for instance */
  height: 48px;          /* for instance */
 }

.box:before {
  background: url(../images/png/elements.png) no-repeat -5px -152px;
}

.box:after {
  background: url(../images/png/elements.png) no-repeat -5px -104px;
}

<div class="box"></div>