How to repeat a background diagonally (only 1 time per line)

Question

I want to repeat a background in diagonal direction, not vertical or horizontal.Do you know a way for that? For example I want a chain that starts from the upper left to repeat itself diagonally to the lower right.I was thinking for some background repeat solution with multiple images, one overlaying in a usefull way the other background(cicada method), but did not succed.Let me know, if you know a solution for this.

Answer 1

Create a :before rule containing your background-image in a rotated way, and transform it:

.foo:before {
    display: block;
    background: url("myimage") repeat-x;
    position: absolute;
    height: 100px;
    top: -50px;
    left: 0;
    width: 200%;
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform-origin:  left center;
    -moz-transform-origin:  left center;
    -webkit-transform-origin:  left center;
    content: "";
    z-index: -1;
}

.foo {
    position: relative;
    overflow: hidden;
}

http://jsfiddle.net/r8BzE/