Fluid layout and css sprites - css

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?

Answer 2

I have not tried this, but there are people doing this with CSS Clip.
http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html
http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/

Answer 3

#media may work for you. Not sure about ie7&8 though.

Answer 4

No, that's not possible. The recommended solution is to use the sprite map in an inline image and have that element's height and width set in your CSS. Here's a link explaining how to do this. This allows your images to resize with the layout.

Answer 5

If you'r ok to use some JS, it's possible, like this snippet.
I use jquery but you can convert it easly in pure js.
I scale the sprit with a ratio calculate between the sprit width and its parent width. I set some negative margin on it, because scale a div with css transform property change the aspect but not the calculate size.
var $sprits = $('.sprit');
$sprits.each(function() {
$(this).data('originalWidth', $(this).width());
$(this).data('originalHeight', $(this).height());
$(this).data('originalParentHeight', $(this).parent().height());
})
function setSpritsScale() {
$sprits.each(function() {
ratio = $(this).parent().width() / $(this).data('originalWidth');
marginWidth = $(this).data('originalWidth') - $(this).parent().width();
marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
$(this).css({
'transform': 'scale(' + ratio + ')',
'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
});
})
}
$(window).resize(setSpritsScale);
setSpritsScale();
.columns {
float: left;
width: 20%;
}
.sprit {
display: inline-block;
background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
background-repeat: no-repeat;
min-width: 75px;
min-height: 75px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>
<div class="columns">
<div class="sprit"></div>
</div>