Sprite css background will it work with fluid l as layout

[abcdf]

I use a css sprite to display backgrounds on a fixed width design. Im changing to fluid layout, but because of the background positions the background image goes wonky when the browser resizes.

Is it possible to use a css sprite with a fluid grid background, where it resizes eith the layout?

[Shikha Singh]

A fluid layout and using fixed positioning are not mutually exclusive.

If you have an element on the page that does not expand, for example a button using a sprite background, then using px for size or position is appropriate (arguably mandatory).

Assuming that the icon maintains its size, you can move the image to a fixed size, absolute positioned child element:

.icon {
  /* fluid 30% with 1:1 aspect ratio */
  display: inline-block;
  width: 30%;
  padding-bottom: 30%;
  position: relative;
  border: 1px solid hotpink;
}
.icon::before {
  content: "";
  /* auto margin trick for horizontal + vertical centering */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /* match icon size */
  width: 30px;
  height: 30px;
  background-image: url(http://i.stack.imgur.com/th9Xy.png);
}
.icon.icon1::before {
  background-position: 0 0;
}
.icon.icon2::before {
  background-position: -30px 0;
}
.icon.icon3::before {
  background-position: -60px 0;
}
.icon.icon4::before {
  background-position: 0 -30px;
}
.icon.icon5::before {
  background-position: -30px -30px;
}
.icon.icon6::before {
  background-position: -60px -30px;
}
<span class="icon icon1"></span>
<span class="icon icon2"></span>
<span class="icon icon3"></span>
<span class="icon icon4"></span>
<span class="icon icon5"></span>
<span class="icon icon6"></span>