Repeating Multiple Images As Background in different Styles

Question

In My Present project End User will Select Any Image from his computer, then we should display that image in below formats.

The Formats Above Are Normal Repeat, Half- Drop, Half-Brick, Center, Mirror respectively

So for that i started working on CSS Background image tricks. But i didnt Got 100% solution with that.

What I have done

1. Taken a Division of 400px width and 400px height

2. Repeated a image using Background-position: and Background-repeat: properties

3. Repeated the image in repeat-x and repeat-y respective to the formats.

4. Repeated the image in such a way to fit with 400px height and 400px width

5. As per my code if we want to repeat the image in 4 rows then we should write 4 background property lines

Please go through the Js Fiddle for better understanding.

What I Want Is

1. Solution can be in CSS or Jquery

2. If it There is a solution in CSS: The background repetition should be done automatically even if am increasing the height of the division.

3. I am not getting any idea to to do the repetition of image in Mirror Format (as last image mentioned above).

Please give your suggestions to make it perfect.

Note : Please Forgive me for my poor explanation. Please go through the Js Fiddle File (You will understand what i want).

Answer 1

You can use JavaScript and the canvas element to modify the background image.

For the half-drop mode create a canvas element with twice the width of the image and draw the image on the canvas like this:

context.drawImage(image, 0, 0, width, height);
context.drawImage(image, width, height / -2, width, height);
context.drawImage(image, width, height / 2, width, height);

For the mirror mode use this:

context.drawImage(image, 0, 0, width, height);
context.save();
context.scale(-1, 1);
context.drawImage(image, -width * 2, 0, width, height);
context.scale(1, -1);
context.drawImage(image, -width * 2, -height * 2, width, height);
context.scale(-1, 1);
context.drawImage(image, 0, -height * 2, width, height);
context.restore();

To set the canvas element as background image use canvas.toDataURL():

element.style.backgroundImage = 'url("' + canvas.toDataURL('image/png') + '")';

Look at this JsFiddle for a full working example.

More information about the canvas element: Tutorial on MDN