Multiple Images Background <div> Repeat

Question

I am trying to finish work on the pixel size for PNG / iPad background image for tumblr website. The content area of ​​the site uses an unlimited scroll function and has a huge vertical background that shows more characters when scrolling down.

I broke the background image into several png, and set the position, and everything looks great. But the last thing I can’t understand is how to do the whole cluster replay. If I set background-repeat: repeat-Y; Images all pile up on top of each other.

Thanks, kick the code:

Drats

#contnetAreaBack { margin-left:auto; margin-right:auto; background-image:url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_01.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_02.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_03.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_04.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_05.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_06.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_07.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_08.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_09.png'), url('http://www.dratsum.com/clientDev/cartoonNetwork/2012-09-11-SuperJail-Tumblr/images/ContentBg_10.png'); background-position:center 0px, center 1000px, center 2000px, center 3000px, center 4000px, center 5000px, center 6000px, center 7000px, center 8000px, center 9000px; background-size: auto auto; background-repeat: no-repeat; background-attachment:scroll; width:100%; padding-bottom:500px; overflow-x:hidden; } 

Answer 1

I noticed from your images that you are using the same yellow tube with different symbols as cracks. Perhaps you could make the background the first line of pixels for the yellow pipe and make this repeat on y. Then you can run a php script that introduces smaller png files with only symbols / cracks in the form of floating images on a channel based on a while loop that ends when you run out of characters. I am not familiar with the restrictions that you mention, but if you do not have restrictions on the number of images you can use, this method should work if you do not want to scroll endlessly as the length increases, repeating the inverse characters. In this case, I would try to use the same solution, but instead of using the number of characters as a limit for my php path, I would try to take the page height before overlaying the images, divide it by the height of one overlay (I imagine all your bg images are the same height) and round. This is a solution with spitball, if you see any big problems, I can be more specific for you.

Answer 2

You can use% (mod) in javascript to repeat the image if the mod is equal to a specific value.

Basically, you will need to put all these broken images in one div, put a duplicate div under it, and then repeat modulo.