5

Using css sprites for icon-style images is best practice by now and pretty easy.

Using multiple repeating backgrounds in one image is traditionally only possible if they either use only vertical or horizontal repeat.

Or is it? Meanwhile with css3 and html5 and all stuff, is there a way to combine multiple background images in one css sprite to make an background pattern and use vertical and horizontal repetition?

Edit/Note: I know this is not the first time such a question is asked. But most/all answers I found are some time ago. I'm just wondering if there is a solution today.

Edit: To illustrate what I'm looking for: http://ibin.co/21LqyJvnGdMB

Scheintod
  • 7,953
  • 9
  • 42
  • 61
  • 3
    Can you show your code? – Nitesh May 11 '15 at 10:16
  • Hi. What code? This is a general "Is it possible to ..." question. I'd expect answers like "No, you still have to use multiple images" or "yes, look here, this is how it's done." I apologise if I haven't managed to make this more clear but I honestly don't know how? – Scheintod May 11 '15 at 10:22
  • This is 4 years ago. Perhaps there is a solution today? – Scheintod May 11 '15 at 10:29
  • 2
    @Scheintod - To represent a visual scenario of the thing that you have mentioned above would be very much appreciated rather than just taking it as a generic view of whether it is possible now or not. You need to illustrate to attract better chances of getting it answered as well as making it helpful for others who can view this post 10-15 years from now also :) – Nitesh May 11 '15 at 10:37
  • 2
    Sorry but what exactly are you asking? – Salman A May 11 '15 at 10:42
  • I don't think there has been anything added to css 3 that allows for the same thing as the `moz-image-rect`, but I did come across a few posts that say you can use some background positioning but it would also mean the your repeating image would need to take up the [whole of one side of your sprite](http://stackoverflow.com/questions/9955967/how-to-use-a-css-sprite-for-a-repeating-background-image). but again, most posts about this topic are around 3 to 4 years old so I guess there hasn't been much movement on this on the css 3 front – Pete May 11 '15 at 10:47
  • I've added an image to show what exactly I'm asking for. I hope this makes it more clear. – Scheintod May 11 '15 at 11:07
  • @Duplicate: Are there any policies on SO that prevent/forbid asking if there has come something new up on a subject already asked years ago? – Scheintod May 11 '15 at 11:25

1 Answers1

0

Yes you can use css sprites for repeating background.

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.

check this article for better understanding. http://www.phpied.com/background-repeat-and-css-sprites/

Roy Sonasish
  • 4,571
  • 20
  • 31