Hello! Actually need a frame on top of the slide as a picture. I tried through border-image, it does not work. The picture is not obtained under the frame and the stripes remain from the border (made the background black so that it can be seen).

#borderimg1 { border: 55px solid transparent; -webkit-border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch; /* Safari 3.1-5 */ -o-border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch; /* Opera 11-12.1 */ border-image: url(http://www.picshare.ru/uploads/170207/8CLqyr97t7.png) 100 stretch; display:inline-block; } body {background:#000;} 
 <div id="borderimg1"> <img src="http://i.piccy.info/i9/a6ba5f06ff28412508622f6d045945ee/1486410047/74902/1116299/slide_1.jpg"> </div>

  • make a frame in png! You will not be able to do it correctly, as it is jpg and with a black background. - Karalahti
  • She png, it transformed it for some reason later, replaced again. - Dias

2 answers 2

In general, make a png frame so that there is transparency inside, put a block with the background of this frame and impose a frame on top of your slides through position: absolute and z-index. + Padding is not forgotten in the size of the frame itself so that the picture is not clipped.

 #borderimg1{ position: relative; padding-top: 4%; } #borderimg1 img{ position: relative; max-width: 100%; height: auto; } .frame { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; display:block; } body {background:#000;} 
 <div id="borderimg1"> <div class="frame"> <img src="http://www.picshare.ru/uploads/170207/8CLqyr97t7.png"> </div> <img src="http://i.piccy.info/i9/a6ba5f06ff28412508622f6d045945ee/1486410047/74902/1116299/slide_1.jpg"> </div>

  • In fact, if you make a png frame and inside it wakes up transparency and at the z-index picture you put 1 it will turn out the way you want to prntscr.com/e5qqn4 - Karalahti
  • Changed your frame on png - Karalahti
  • I have not yet taken into account the fact that it can be adaptive, I did not alter much. - Karalahti
  • Thanks, with the background, too, as an option is suitable, if the cover is set to adaptive, too, it turns out. - Dias
  • Not really, if you put the cover on, then when you reduce the frame, it is cut from the top, as far as I remember - Karalahti

Make a block, nest in it with a frame. Assign a picture with the aunt as a background of this block. Assign aunt background-size: contain;

 <style type="text/css"> #kartina-style{ background-image:url('path/to/tyotenka'); background-repeat:no-repeat; background-size:contain; } </style> <div id="kartina-style"> <img src="path/to/ramochka" alt="ramochka" /> </div>

The size of the picture will be determined by the size of the frame. One of the options.