Different x background-positions for rows in a tiled background - css

Question

I want to create a tiled background in which each row of the background has a random x-offset. That would be ideal, but if that's not possible with CSS (I think not), at least what's the best way to use a single image to create a body background in which this several (let's say 4) rows of this image have different x positions?
Something like:
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA
IMAGEIMAGEIMAGEIMAGE
MAGEIMAGEIMAGEIMAGEI
AGEIMAGEIMAGEIMAGEIM
GEIMAGEIMAGEIMAGEIMA

Answer 1

what would be the size of your image? If is is very small, an easy solution would be to do that in photoshop/paint. The resulting image would be 4x larger, but for small images (read less than 25ko), I think it is by far the easiest way. At least I don't see any easy CSS solution to your problem.
If your picture is quite big and you know its height, you could eventually have the following approach: http://jsfiddle.net/7GPTy/
The idea is to create several divs at z-index:-1 of height == image_height and absolute position with different left values... i'd see that as a coarse but working solution
var mybody = document.getElementById('body');
var bodyHeight = mybody.offsetHeight;
var imgHeight = 49; // you could get the size by opening the file
var offsetLines = 4; // this is the number of offset you asked, but you can change that!
var nbOfLines = Math.ceil(bodyHeight/imgHeight);
for(var i=0; i<nbOfLines; i++){
var newBgDiv = document.createElement('div');
newBgDiv.className = 'backgroundImg imgOffset_'+(i%offsetLines);
newBgDiv.style.top = (i*imgHeight) + 'px';
newBgDiv.style.height = imgHeight + 'px';
newBgDiv.style.width = '100%';
mybody.appendChild(newBgDiv);
}
to go through the js code quickly, I basically get the height of the page and divide it by the height of the picture to know how many divs i have to create to generate the entire background. Once done, you simply define the number of different row offset you want (offsetLines) and you generate your divs.
In my example, the offset depends on the size of the window (try to resize horizontally your window, you'll see that the offset changes). You can of course fix it to a defined number of pixels !

Answer 2

If CSS3 is appropriate for your project, you can use multiple backgrounds to do this.
Make an image that is twice the height of your pattern, with the top half filled with your pattern, and the bottom half transparent.
Then use multiple backgrounds to position them accordingly like so:
.div {
background: url(path/to/image.png) 0 0 repeat,
url(path/to/image.png) 0 {height of image in pixel} repeat
}
Its not a random offset, but with enough variations to this, it would be hard to tell the difference.
If you want to add to the perceived randomness, have a look at this post.