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

In what way does the image go wonky? – Brian Maltzan Feb 06 '12 at 21:06 — Brian Maltzan, Feb 06 '12 at 21:06

score 2 · Answer 1 · answered Feb 05 '12 at 20:49

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?

Yes, this is what I was thinking, and then adding multiple versions of your image, within the sprite. When you resize past the threshold, the view will redraw. For the image display issue, maybe you need overflow: hidden? — Brian Maltzan, Feb 06 '12 at 21:51

score 2 · Answer 2 · edited Feb 06 '12 at 22:28

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/

edited Feb 06 '12 at 22:28

Brian Maltzan

1,327
10
12

answered Feb 06 '12 at 20:34

Andri

153
1
6

Clip is supported by ie7+8, but has an alternate syntax, according to this: http://reference.sitepoint.com/css/clip#compatibilitysection – Brian Maltzan Feb 06 '12 at 21:45

score 0 · Answer 3 · answered Apr 07 '16 at 09:27

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>

score 0 · Answer 4 · answered Feb 05 '12 at 18:12

0

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

answered Feb 05 '12 at 18:12

Brian Maltzan

1,327
10
12

Could you explain more about how @media can help when we have fixed size sprite png – Jitendra Vyas Feb 05 '12 at 18:24
Doesn't answer the question even remotely. – dmackerman May 14 '13 at 14:19

score 0 · Answer 5 · answered Feb 06 '12 at 16:13

0

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.

answered Feb 06 '12 at 16:13

Alex Morales

1,166
9
13

Fluid layout and css sprites

5 Answers5