17

I'd like to keep all my small images in one sprite file, for example:

enter image description here

Now suppose I want to add a thin background image which is meant to repeat-x over 100% the width of an element:

enter image description here

Does this have to be stored as a seperate entity, or can I somehow store it in the sprite image? I can't work out if it's possible to do a background-repeat over a section of a sprite, I think not but I'm fairly sure I've seen it done somewhere.

Tom Gullen
  • 61,249
  • 84
  • 283
  • 456

2 Answers2

21

I’m not sure if this is in CSS3 already, but the Gecko engine (Firefox 4 …) adds image-rect as -moz-image-rect which allows you to select a specific part of an image for usage. With that you can select a part of your sprite as the background image and then repeat it.

It is definitely not wide-spread or standard yet though.

What I like to do is do 3 kinds of sprites. One with icons, where you don’t use repeats at all, one for horizontal-repeating images, and one for vertical-repeating images.

That way you can add several to be repeated backgrounds to one sprite but not have that much of a hassle using it.

Kissaki
  • 8,810
  • 5
  • 40
  • 42
  • 2
    (Just as a further note:) For horizontally- and vertically-repeating images you’ll have to do own images anyway, so no sprites possible there. – Kissaki Feb 19 '11 at 16:14
  • nifty trick - shame it won't work for ye 'ol browsers. -Though totally useful for doing mobile-webkit development-! (boo! it's FF3.6+ only so no mobile-webkit goodness for us :( ) – Tom Tu Feb 19 '11 at 16:27
17

You'd have to make it full width of the sprite image. Otherwise it could leak other images or blank space when being repeated.

Remeber that repeating really small background images (1-2px wide) can have terrible impact on performance - it's always better to use a bit larger images for that so even if it would be wee wide - it can actually be better page rendering wise then 1px wide one.

EDIT: (regarding your edit)

If your element is fixed height you can put it on your sprite width 100% width of the sprite with the required max-height of the element. Or if you know that its max width is smaller then the width of the sprite then make it a rectangle with the max width and height of your element.

If you dont know the max height and you want to put it at the very top so the gradient eases into a solid color it can be done if you put your repeated image at the very bottom of the sprite and position it with negative top value background-position: 0px -300px where 300px is the distance from the top of your sprite to the top of the background image on your sprite.

Look here how google positioned repeated BG on a sprite:

google sprite

Tom Tu
  • 9,573
  • 35
  • 37
  • Thanks Tom, do you have any figures for the thin repeating BG images? I've never heard of that performance consideration before. – Tom Gullen Feb 19 '11 at 16:01
  • 1
    Oh, really? I never thought of that. Do you have a source for the performance implication of using repeats on smaller imgs? Benchmarks or sth? – Kissaki Feb 19 '11 at 16:02
  • 2
    I've used to read it quite a while ago - but very recently when working on my HTML5 canvas game I've used 1px wide repeated background image as a game BG (in CSS as a page BG not in canvas), the FPS in game dropped by ~20% when I've use this one vs larger one. When rendering engine is drawing repeated backgrounds it have to composite them so this is the reason behind it - I was surprised that the performance hit was so big. It can affect animations on the page etc - anything CPU heavy. I'll try to dig some articles with numbers :) – Tom Tu Feb 19 '11 at 16:05
  • people mentioning it here in the comments... still looking for numbers :) http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/ and people mention it here http://stackoverflow.com/questions/1530299/repeating-website-background-image-size-vs-speed – Tom Tu Feb 19 '11 at 16:08
  • Not sure if there is a performance difference, but you may run into rendering problems if you repeat an image that is too small. I once answered a question about IE rendering a background 1x1 image as a gradient instead of a solid color, but I can't find it now... – Guffa Feb 19 '11 at 16:21
  • Yeah IE was especially affected by this as its rendering engine was terribly slow... Can't find anything neigther... It's simply one of those things that you know - you've experienced them and you've simply stopped wondering about them you just avoid doing it :) The surprise with the FPS drop on my game just reminded me about this 1px bg performance hit. – Tom Tu Feb 19 '11 at 16:25
  • The specific problem with `1x1` backgrounds is this: http://stackoverflow.com/questions/7764751/ie8-shows-gradient-instead-of-background-image/7765128#7765128 – thirtydot Nov 10 '11 at 17:53