jquery - Repeating Multiple Images As Background in different Styles -

in present project end user select image computer, should display image in below formats.

the formats above normal repeat, half- drop, half-brick, center, mirror respectively

so started working on css background image tricks. didnt got 100% solution that.

what have done

1. taken division of 400px width , 400px height

2. repeated image using background-position: , background-repeat: properties

3. repeated image in repeat-x , repeat-y respective formats.

4. repeated image in such way fit 400px height , 400px width

5. as per code if want repeat image in 4 rows should write 4 background property lines

please go through js fiddle better understanding.

what want is

1. solution can in css or jquery

2. if there solution in css: background repetition should done automatically if increasing height of division.

3. i not getting idea to repetition of image in mirror format (as last image mentioned above).

please give suggestions make perfect.

note : please forgive me poor explanation. please go through js fiddle file (you understand want).

you can use javascript , canvas element modify background image.

for half-drop mode create canvas element twice width of image , draw image on canvas 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 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 canvas element background image use canvas.todataurl():

element.style.backgroundimage = 'url("' + canvas.todataurl('image/png') + '")'; 

look @ jsfiddle full working example.

more information canvas element: tutorial on mdn