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!
August 1st, 2012 at 2:10 pm
Informative article, totally what I wanted
to find.
August 6th, 2012 at 5:43 am
Hi! When I repeat-x a background in an horitzontal menu that works right, but if I do a zoom in the web (ctrl- or ctrl+) there is 1px of height that does not work. I don’t understand that, because when I used simple images (non sprite) there was not this problem. How can I solve that? The website is compraralojamientoweb.com. Try to zoom the page and see the navigation menu. Thanks in advance.
August 6th, 2012 at 5:47 am
Oh, sorry. In seozeta.com you can see the same navigation menu but without using sprites. As you can see, in that case there is not the problem of 1 px of height…
August 6th, 2012 at 8:08 pm
[...] Background Repeat and CSS Sprites 什么情况下使用CSS Sprites [...]
September 23rd, 2012 at 12:24 pm
[...] Background Repeat and CSS Sprites什么情况下使用CSS Sprites [...]
September 28th, 2012 at 5:13 pm
Today, I went to the beachfront with my kids. I found a sea shell and gave it
to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed.
There was a hermit crab inside and it pinched her ear. She never wants to go back!
LoL I know this is entirely off topic but I had to
tell someone!
October 2nd, 2012 at 7:53 pm
I think the admin of this site is in fact working hard for his site, since
here every data is quality based material.
October 4th, 2012 at 10:09 pm
Everything said made a lot of sense. But, what about this?
what if you added a little information? I mean, I don’t wish to tell you how to run your website, but suppose you added something that grabbed a person’s attention?
I mean Background repeat and CSS sprites / Stoyan’s phpied.com is a little boring. You might look at Yahoo’s home page and watch how they create post titles to
get people to open the links. You might add a video or a pic or two to get
readers interested about what you’ve written. Just my opinion, it would make your posts a little livelier.
October 15th, 2012 at 8:55 am
I’m curious to find out what blog platform you have been working with? I’m having some minor security problems with my latest site and I would like to find
something more safe. Do you have any recommendations?
October 18th, 2012 at 11:47 am
I’m curious to find out what blog system you happen to be using? I’m having some minor security issues
with my latest site and I would like to find something more secure.
Do you have any solutions?
November 1st, 2012 at 9:40 am
I really like what you guys are up too. Such clever work and reporting!
Keep up the wonderful works guys I’ve added you guys to my personal blogroll.
December 16th, 2012 at 3:18 pm
Hi my loved one! I wish to say that this article is awesome, great written and include almost all important infos.
I would like to see more posts like this .
December 19th, 2012 at 3:49 am
Thanks for your work! If I had discovered it before I had worked less in some of my sites, but… good news!!! In my future sites I will use it!!!! Do you know if it works in google chrome?
Thanks a lot!
January 7th, 2013 at 5:45 am
First off I would like to say wonderful blog! I had a quick question
which I’d like to ask if you don’t mind. I was interested to
know how you center yourself and clear your head before writing.
I’ve had a hard time clearing my mind in getting my ideas out there. I do enjoy writing but it just seems like the first 10 to 15 minutes are generally lost just trying to figure out how to begin. Any ideas or tips? Thank you!
My website – list of foods to avoid with gout
January 9th, 2013 at 8:58 am
Lots of firms provide discounted rates for normal clients,
individuals and organizations who regularly use their services.
These days, there are quite a number of data lookup services that can help you gather all the
reports you need when doing a criminal history search, whether you are merely trying
to retrieve a new neighbor”. Additional concerns pertaining to the criminal accounts of
this region may be addressed by calling (850) 410-8109 on
regular office hours on working days.
January 19th, 2013 at 6:16 pm
With havin so much written content do you ever run into
any problems of plagorism or copyright violation?
My website has a lot of exclusive content I’ve either created myself or outsourced but it looks like a lot of it is popping it up all over the web without my agreement. Do you know any ways to help protect against content from being ripped off? I’d truly appreciate it.
January 28th, 2013 at 11:16 am
Appreciate this post. Let me try it out.
My blog post :: destinations
February 25th, 2013 at 4:15 am
I think the admin of this site is in fact working hard for his site, tehnk you.
February 25th, 2013 at 4:19 am
Söve , Mantolama , Kartonpiyer , Strafor
March 5th, 2013 at 9:41 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. [...]
March 23rd, 2013 at 11:34 pm
Very good blog! Do you have any helpful hints for aspiring writers?
I’m hoping to start my own site soon but I’m a little lost on everything.
Would you suggest starting with a free platform like WordPress or go for a paid option?
There are so many options out there that I’m completely confused .. Any ideas? Thanks!
April 7th, 2013 at 4:09 am
An outstanding share! I have just forwarded this onto a colleague
who had been doing a little homework on this.
And he in fact bought me breakfast because I found it for him.
.. lol. So allow me to reword this…. Thanks
for the meal!! But yeah, thanks for spending time to discuss
this issue here on your website.
April 23rd, 2013 at 8:33 pm
This article provides clear idea for the new viewers of blogging,
that truly how to do blogging.
April 23rd, 2013 at 8:51 pm
I just like the valuable info you provide in your
articles. I will bookmark your blog and test again here regularly.
I am rather sure I’ll be informed a lot of new stuff proper right here! Good luck for the following!
April 25th, 2013 at 6:07 am
It’s approximately your own imagination and drive to search out the job which fits you best; it’s on the market –
you just need to take it. Countless hours of educational
material and mentoring with the elite are waiting in
private meetings within the worlds most exotic places. The good thing about these jobs is that you simply can set your
personal hours to work.
Here is my web page: best way to make money as a member in runescape
April 29th, 2013 at 3:48 am
I wanted to develop a simple word in order to appreciate
you for all of the stunning tips and tricks you are writing on
this website. My extensive internet lookup has finally been recognized with incredibly good suggestions to talk about with my friends and family.
I ‘d suppose that many of us visitors are very blessed to be in a perfect site with very many outstanding individuals with good methods. I feel quite blessed to have seen your website page and look forward to really more amazing minutes reading here. Thanks once more for everything.
May 1st, 2013 at 9:08 am
These anti-oxidants are potent anti-aging factors that help the body hold off
and eliminate the tell-tale signs of the aging process.
This need for energy has compelled nations to search for new sources of materials to produce energy from in
order to fulfill the daily needs of their citizens. Many new
innovative methods are introduced in the shale gas drilling such as drilling the well vertically, usage of hydraulic
fracturing, injecting chemicals, sand and water at high pressure into the rock and allow the gas to flow.
May 1st, 2013 at 1:42 pm
Simply want to say your article is as astounding. The clearness for your submit is simply spectacular and i can think you are knowledgeable in this subject. Fine together with your permission allow me to grasp your feed to stay updated with impending post. Thank you 1,000,000 and please continue the enjoyable work.
May 2nd, 2013 at 5:30 pm
I like what you guys are usually up too. Such clever work and exposure!
Keep up the amazing works guys I’ve added you guys to my personal blogroll.
May 2nd, 2013 at 5:58 pm
hello there and thank you for your info – I have certainly picked up
something new from right here. I did however expertise some technical points using
this web site, as I experienced to reload the website many times previous
to I could get it to load correctly. I had
been wondering if your web host is OK? Not that I am complaining, but
slow loading instances times will sometimes affect your placement in google and
could damage your high-quality score if advertising and marketing with Adwords.
Well I’m adding this RSS to my e-mail and can look out for a lot more of your respective intriguing content. Make sure you update this again soon.
May 3rd, 2013 at 1:21 am
I think the admin of this web page is truly working hard for his
web site, because here every stuff is quality based stuff.
May 3rd, 2013 at 1:54 am
Do you have a spam issue on this blog; I also am a
blogger, and I was wondering your situation; we have created some nice practices and we are looking to exchange strategies with other folks, why not
shoot me an e-mail if interested.
May 9th, 2013 at 11:38 am
I believe that is one of the most vital info for me.
And i’m satisfied reading your article. But want to observation on few common issues, The web site style is perfect, the articles is in reality great : D. Excellent process, cheers
Here is my web site; free tablet pc
May 13th, 2013 at 12:32 pm
With havin so much written content do you ever run into any problems of plagorism
or copyright violation? My website has a lot of completely unique content I’ve either written myself or outsourced but it seems a lot of it is popping it up all over the web without my agreement. Do you know any techniques to help stop content from being stolen? I’d genuinely appreciate it.
May 15th, 2013 at 11:54 pm
Hello There. I found your blog using msn. Тhiѕ is a very well written article.
I’ll make sure to bookmark it and return to read more of your useful info. Thanks for the post. I’ll definitely return.
May 16th, 2013 at 6:01 pm
Avocado Oil – This natural oil can successfully hydrates and is
also compatible with the skin’s own oils. There is no better way of making this happen than doing it naturally. It has a high content of lauric and myristic acids which have a melting point relatively close to the human body temperature.
May 20th, 2013 at 6:12 am
Hi there, just became alert to your blog through Google, and found that it is really informative.
I am going to watch out for brussels. I will appreciate if you continue this in future.
Many people will be benefited from your writing. Cheers!