CODEWITHSUNDEEP
jqueryhtmlcssimagebackground-image
Sree ram
Sree ram

Reputation: 379

Repeating Multiple Images As Background in different Styles

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

Basic Format Half Drop Format Half-Brik Format Center Format Mirror Format

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).

Upvotes: 5

Views: 819

Answers (2)

ausi
ausi

Reputation: 7413

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

Upvotes: 3

Diesel9 - Dan
Diesel9 - Dan

Reputation: 68

There are various ways to answer this question, but if it was me, I'd make it a repeating element. I'm not sure what you're using for your server technology (PHP or ASP) but I would have some if statements setup.

If its in the mirror mode:

.mirrorLeft {
        width:50%;
        position:aboslute;
        left:0;
        top:0;
        background-repeat:repeat-y;
}

.mirrorRight {
        width:50%;
        position:aboslute;
        right:0;
        top:0;
        min-height:100%;
        background-repeat:repeat-y;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

<div class="background">
    <div class="mirrorLeft"></div>
    <div class="mirrorRight"></div>
</div>

Obviously I left our the background image source, I'm just giving an example of how to setup the positioning.

Upvotes: 0

Related Questions