Fluid layout and css sprites

Question

I used 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?

I need layout compatible with ie 7 and 8 with other latest browsers

Answer 1

Adding to what @brianMaltzan wrote about @media you can use different resolution groups to have a different stylesheet

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />

or block of css code for the style of your page:

@media (max-width: 860px) {
    body {
         width: 600px;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    body {
         width: 800px;
    }
}
@media (min-width: 1025px) {
    body {
         width: 1000px;
    }
}

I would suggest to use a few fixed sizes which will alter with each stylesheet, rather than percentages (if you are using them). Can you show us an live example of the sprite in place with your fluid layout so that we can see the issue?