-1

I want to add two pictures in an frame/img.We can rotate the image on the frames.but that rotation doesnot go out from his boudry only strechable to its axis:

enter image description here

I have added/submit an image and add on the background but thats not correct.Because if i have to add two pictires we cannot put two backgroung-images?.We have to see where the column/frame is empty just select the picture for that frame on the picture and we can able to resize/adjust like fabric.Js.

enter image description here

ahmadlatif1084
  • 53
  • 6
  • You said: `we cannot put two background-images`. This is not true. `CSS` allows you to add `multiple background images` for an element, through the `background-image` property. The different background images are separated by `commas`, and the images are stacked on `top` of each other, where the first image is closest to the viewer. – Kavian K. Jun 14 '18 at 10:08
  • Yes we can able to add two-background images,but my requirement is that how we can rotate images on frames,like we upload two pictures and we can move it in frames.like reference in the site http://viptalisman.com/frame/127239/ Thanks. – ahmadlatif1084 Jun 19 '18 at 06:53

1 Answers1

0

Simply do this with CSS only:

#frame {
    width: 700px;
    height: 525px;
    position: relative;
    overflow: hidden;
    background: transparent url(https://i.stack.imgur.com/E4BCt.png) 0 0 no-repeat
}
#frame:before,
#frame:after {
    transform: rotate(21deg);
    content: '';
    position: absolute;
    width: 230px;
    height: 350px;
    z-index: -1
}
#frame:before {
    transform: rotate(21deg);
    top: 88px;
    left: 410px;
    background: url(https://image.ibb.co/mHHved/frame1.jpg) 0 0 no-repeat
}
#frame:after {
    transform: rotate(-23deg);
    top: 45px;
    left: 77px;
    background: url(https://image.ibb.co/fivsQJ/frame2.jpg) 0 0 no-repeat
}
<div id="frame"></div>
Kavian K.
  • 1,340
  • 1
  • 9
  • 11
  • ,Thanks for the reply but i can able to do this functinality too,able to rotate images on my self.I want these features ->Rotate Images on frames,we cann add text manually on frames,we can able to move that text anywhere in the frame and we want to add an emoji.you can see this in a reference site.http://viptalisman.com/frame/127239/ – ahmadlatif1084 Jun 19 '18 at 06:36
  • and most important we can only able to rate images on frames on its border or inside its frames like referenced on the site. http://viptalisman.com/frame/127239/ – ahmadlatif1084 Jun 19 '18 at 06:51
  • i have applied fabric js , in which i have to add pictures but that directly fits into its frame like you mentioned above but it can be stretchable or resize in its directory.Please see the code below. http://jsfiddle.net/ahmadlatif1084/y37Lwjt9/1/ – ahmadlatif1084 Jun 19 '18 at 10:07