Repeating sprite images both in x and y axis
I know, sprite images can be repeated only in x or y axis. But is there any way to repeat image in both the axes? i.e I want to fill the “post” background with sprite image. I don’t want to create another sprite image with horizontal image alignment to fill y axis.. Any idea??
Thanks in advance..
AnonymousDecember 10, 2011 at 11:51 am #20965
I don’t think you can repeat on both the axis using sprites. You can use one or the other. If you did both it would kind of defeat the purpose, since when you use repeat, you can’t have any other images in that row or column (depending on x or y repeat).
Taken from the web:
You can only use sprites for images that repeat in the same direction. This is because there is no way to limit the repeatable area through CSS, so if you’re repeating horizontally there can’t be any other images placed along the horizontal axis of the section you want repeated or they will be included in the repeat. So, pages that have backgrounds repeated in multiple directions will be able to be reduced to no less than 2 HTTP requests for background images.
You can create two files: a sprite_repeaty.png and a sprite_repeatx.png. All of your backgrounds with repeat-y can be placed along the top edge of sprite_repeaty.png. All of your backgrounds with repeat-x (only one for now, but you can set it up for later) can be placed along the left edge of sprite_repeatx.png. If you have icons or backgrounds that aren’t repeated they can be included in either of these files.
Sprites are easier to maintain if you place the images at regular intervals so that you don’t have to check the file when applying position, you can simply set background-position:0 0;, background-position:0 -100px;, background-position:0 -200px;, etc, depending on the scale you choose.
AnonymousDecember 10, 2011 at 12:29 pm #20966
Yeah, I knew that. So I’m sticking to different images..
- You must be logged in to reply to this topic.