How to tile a background with a picture at a random right angle?

Question

css

There is a picture, you need to tile the background with it so that they are not at the same angle, but at different angles (90, 180, 270 or 0). How can this be implemented?

Answer 1

or create a container (overflow:hidden), put inline elements with a given background in it, create 4 css classes in advance, and fill it in, just think of the logic (width / height / paddings there):

.rot_90d{
    z-index: -1;
    background: url(background.png) 0 0 repeat;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

Answer 2

Either pre-generate on the server, or create a canvas element, place it under everything else and draw this picture on it as many times as necessary with random rotations.