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 Taken a Division of 400px width and 400px height Repeated a image using `Background-position:` and `Background-repeat:` properties Repeated the image in `repeat-x` and `repeat-y` respective to the formats. Repeated the image in such a way to fit with `400px height` and `400px width` 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 Solution can be in CSS or Jquery If it There is a solution in CSS: The background repetition should be done automatically even if am increasing the height of the division. I am not getting any idea to to…

Accepted Answer

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

Repeating Multiple Images As Background in different Styles

Solution

Problem