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