CSS Sprites Repeating Images

html css optimization image css-sprites
fhd picture fhd · Jul 28, 2010 · Viewed 12.6k times · Source

I was wondering if there is any way to use just one image for repeating and non-repeating images using css sprites. So in this case I would like to combine all the images on a page no matter what width and height and if they will be used as repeating or non-repeating images. I know the standard is to create 1 image using all the non-repeating images and another image using all the repeating images. But i just wanted to know if i could just use 1 image for everything.

Thanks.

Answer

Ryan Kinal picture Ryan Kinal · Jul 28, 2010

The short answer is "no".

The explanation is that repeating images are displayed in their entirety in whatever direction they repeat. So, a background that is set to repeat-x will show all image content in the horizontal direction. This is why you can't repeat in both directions simultaneously using sprites.

Related questions

How do I position one image on top of another in HTML?

I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper …

Read More
Do Images Load Faster in HTML or CSS?

If I load an image using this html on my sidebar Would it load any faster/slower than if I instead put on the sidebar where my style.css (which is called in the header) has .image { width: 200px; height: 200…

Read More
Optimization- Is there any way to find and remove unused CSS and Javascript common to all html pages?

My website has many webpages and I am trying to clean up my stylesheets and scripts. About 10% or more of each js/css are not being used by any of the html pages in my website. What I need is …

Read More