Background repeat and CSS sprites
CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases when the background repeats.
The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case: when you want to repeat horizontally, sprite vertically.
Example
» Demo
You have three divs and you want to repeat their background vertically, so that the background takes the whole height of the div, according to the content.
Source images:
Singe image sprite:
CSS definitions to make this work:
div { background-image:url(sprite8.png); background-repeat: repeat-y; width: 160px; padding: 20px; margin: 20px; float: left; } #my { background-position: 0px; } #my2 { background-position: -200px; } #my3 { background-position: -400px; }
Every image is 200px wide. Because of the 2x20px margin left and right, the width is 160px (=200 - 20 - 20)
The tree divs have IDs: my, my2, my3
Result
Once again, the result
Tested on Windows with IE7, FF, O, S.
This entry was posted on Thursday, April 3rd, 2008 and is filed under CSS, performance. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Get notification for future posts: follow me on Twitter or subscribe to my RSS feed
April 8th, 2008 at 1:07 am
Nice to see this issue addressed, thanks… I like to use percentage widths though–I guess only something like SVG would allow one to indicate a percentage width/height which would work on both the image as well as the containing element?
April 15th, 2008 at 1:49 am
[...] comentarios de esta entrada suscribiendote al feed RSS 2.0. Puedes dejar un comentario, o enviar un trackback desde tusitio. [...]
June 17th, 2008 at 2:18 am
css background examples , Properties , Attribute – - http://css-lessons.ucoz.com/background-css-examples.htm
October 24th, 2008 at 7:11 am
Thanks for the demo and the special instruction on repeating css sprite images!
January 23rd, 2009 at 2:20 pm
What if I have a background image that needs to be repeated x and y?
March 20th, 2009 at 4:42 am
[...] Source [...]
March 31st, 2009 at 3:29 am
[...] gibt zwar eine Möglichkeit, aber ich halte die nicht für wirklich brauchbar, da man ziemlich eingeschränkt wird und für [...]
April 27th, 2009 at 10:22 pm
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 27th, 2009 at 11:00 pm
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 27th, 2009 at 11:57 pm
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 28th, 2009 at 12:10 am
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 28th, 2009 at 12:42 am
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 28th, 2009 at 2:43 am
[...] Background Repeat as great as CSS Sprites CSS sprites have been a great approach to urge a loading speed of your pages. One of a problems we competence face with sprites is how to bargain with cases where a credentials repeats. The order is flattering simple: if we wish a credentials to repeat plumb (top to bottom), place a images in a goddess horizontally (left to right) as great as have certain a particular images in a goddess have a same height. For a conflicting case, when we wish to repeat horizontally, goddess vertically. [...]
April 28th, 2009 at 4:33 am
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
April 30th, 2009 at 5:00 am
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
May 1st, 2009 at 2:28 am
[...] Background Repeat and CSS Sprites [...]
May 4th, 2009 at 11:05 pm
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
May 6th, 2009 at 3:15 am
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
June 3rd, 2009 at 3:52 am
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
June 10th, 2009 at 9:18 am
[...] infine un esempio pratico : http://www.phpied.com/background-repeat-and-css-sprites/ var heyos_popunder_user = 8812; var heyos_popunder_type = ‘G’; Segnala presso: Articoli che [...]
June 10th, 2009 at 11:54 am
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
July 9th, 2009 at 6:49 am
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
August 11th, 2009 at 4:33 am
if you interesting in reading about CSS Sprites in hebrew, you are invited to read this article:
http://www.ing.co.il/?p=24
September 6th, 2009 at 3:38 am
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
October 2nd, 2009 at 10:36 pm
[...] Background Repeat and CSS Sprites CSS sprites are a great way to improve the loading speed of your pages. One of the problems you might face with sprites is how to deal with cases where the background repeats. The rule is pretty simple: if you want the background to repeat vertically (top to bottom), place the images in the sprite horizontally (left to right) and make sure the individual images in the sprite have the same height. For the opposite case, when you want to repeat horizontally, sprite vertically. [...]
October 11th, 2009 at 9:47 am
There is open source tool – http://sprites.in/ – which can automatically create CSS Sprites of aolmost any complexity. It’s also included into Web Optimizer tool – http://www.web-optimizer.us/
February 26th, 2010 at 2:05 am
dont want to be picky, but its the padding not the margin which gets added to the width of a box
April 8th, 2010 at 2:09 am
Just what i was searching for .. .. but it has some limitations due to all the repeating images must go from edge to edge of the sprite .. so you’ll basicly need one for repeat-x and one for repeat-y .. + if you have larger images in you sprite – the 1px wide images must as said go from edge to edge which will eventually make the sprite larger and heavier ..
Alternately you could have 3 sprites .. one for images, one for repeat-x, one for repeay-y .. the images that needs repeat x & y – that might be another issue that needs attention .. might not be possible with a simple solution ..
But great article .. made me think a bit ..
July 7th, 2010 at 8:06 am
I’m of the opinion it’s better to have 3 sets of sprites. 1 core images, 1 vertical repeats, 1 horizontal. The whitespace you have by having them together defeats the object.
September 16th, 2010 at 8:20 am
hi
I’m using this technique
it’s very good
but i can’t sprites some image . ..
some of them make trouble in my theme
September 24th, 2010 at 4:40 am
Be aware that, though the use of sprites is always recommended, it is not always possible to have repeating backgrounds with sprite images.
Let’s say we have the following situation. We use a sprite (with vertically aligned images with an transparent background) for our images for a website, with each image in the sprite having different dimensions. One of the images is a 1px by 18px gradient which is used for a horizontal repeating background. This means a width of 1px and an height of 18px. However, we still have other images in the sprite, with widths of over 1px. Let’s say that our widest image in the sprite is 50px.
Should we now use the first mentioned gradient for a horizontal repeating background, we see that something is wrong. The gradient is repeated, but with -you guessed it- 49px of transparent space between the 1px wide gradients. This is because the browser always uses the whole width of the used image (in this case a sprite) when repeating horizontally. It doesn’t know that we only want to repeat the small 1px by 18px image.
We can counter this effect in 2 ways. The first way, the easiest and most obvious way, is by using a seperate image for the gradient. The second way is making sure that all images that will be repeated in a background are as wide as the whole sprite image. In the example stated above, we need to make sure that our gradient is 50px by 18px.
This will effectively save the browser an extra HTTP request since the browser doesn’t have to download the extra image. This saves 4KB (woohoo!) and around 100ms. The latter is the most important difference here, since 10 of those tiny gradients means an extra second added to your page-buildup. The sprite itself won’t grow in size (much) because of the already used bytes for the (in this case 49px of transparent) pixels not used.
September 30th, 2010 at 1:08 pm
I was wondering if we can repeat-x css sprites? it’s not possible right?
December 7th, 2010 at 9:35 pm
[...] Background Repeat and CSS Sprites [...]
January 20th, 2011 at 12:05 am
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
April 21st, 2011 at 10:29 am
Unfortunately, this works only with equal height (or width for x-repeated) sprite backgrounds.
August 1st, 2011 at 4:55 am
Its not possible for other scenario
October 8th, 2011 at 6:04 pm
background checks…
[...]Background repeat and CSS sprites / Stoyan’s phpied.com[...]…
October 25th, 2011 at 7:19 am
I’m new at using sprites, and the second paragraph answered the question I had in mind. Thanks!
November 7th, 2011 at 9:54 am
[...] Background Repeat and CSS Sprites [...]
November 14th, 2011 at 7:04 pm
[...] Background Repeat and CSS Sprites [...]
January 30th, 2012 at 5:02 pm
Thank you very much for the demo and the special instruction on repeating css sprite images, really it was a probleme for me, i will try this one
February 11th, 2012 at 7:31 am
veryuseful..i had the same problem before..but thanks to this article i found the answer.
February 14th, 2012 at 11:02 pm
Thanks Max on ur valuable input on repeating images and sprites.
May 3rd, 2012 at 8:51 am
Fantastic article. Thumbs up!