The question is, is it possible to overlay and position the image in a 2- div ? Those. I need part of one image to be in one div , and part in another, but at the same time it was one image, without dividing into parts - is this in principle feasible with css ? The point is, there is one div from the menu, the other with content (on the right) needs to be achieved so that this picture is under the menu on the left (leaves), and the rest is continued in the content.

enter image description here

That's what I’m trying to achieve, but , the part of the picture that comes in behind the menu (leaves) should not be on other pages.

  • Sure you may. Where is the example? The idea of ​​puzzles / mozayki? - Mr. Black
  • If you gave more information and visually showed an example that you are trying to achieve, then it would be easier to understand how to help you. - And
  • Should the leaves be behind the buttons or on them? - Mr. Black
  • Or do the buttons go with the picture? - Mr. Black
  • @Doofy, buttons with background-image yes, the leaves should be behind the buttons. - Denis

3 answers 3

If the divas stand side by side, you just need to add a picture in one block and set a negative margin on the side with which the second block is located. Or put a picture on the background of each block and position it as sprites do.

    The best option to use sprites

     function move(g) { g.onmousemove = function(e) { g.style.marginLeft = parseInt(g.style.marginLeft) <= 100 ? parseInt(g.style.marginLeft) + e.movementX + 'px' : 100 + 'px'; return false; } g.onmouseleave = function() { g.onmousemove = null; } g.onmouseup = function() { g.onmousemove = null; } } 
     body { margin-left: -160px; } .image { width: 313px; height: 234px; background: url('https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg') no-repeat; float: left; } .left { background-position: 156px 0; } .right { background-position: -156px 0; cursor: pointer; } 
     <div class='image left'></div> <div class='image right' onmousedown='move(this)' style='margin-left: 16px'></div>

    • I understand if you use this method, then part of the picture will remain under the menu after I open the other content on the right, right? - Denis
    • @ Denis, I did not understand the question at all. There are buttons on the left, one picture behind the buttons and that's it. What is required? - Mr. Black
    • updated the question. - Denis

    I do not know whether it is necessary or not, but it seems like you described it, I specifically inserted the background of the child so that the overlay from one to the other block could be seen

     *{ margin:0; padding:0; text-decoration:none; } html,body{ height:100%; } .wrapper{ width:800px; min-height:500px; position:relative; margin:20px auto; } .wrapper:after{ content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:url(http://www.playcast.ru/uploads/2014/09/03/9718884.png),rgba(0,0,0,.3); } .left{ width:30%; min-height:500px; background:reansparent; position:relative; float:left; } .left:after{ content:""; position:absolute; left:10%; top:0; width:200%; min-height:500px; background:url(http://boombob.ru/img/picture/Apr/21/a554b52cfd4b7d3220927cef413aef2e/1.jpg); background-size:100% 100%; z-index:6; } .left ul{ position:relative; z-index:1000; left:24px; } .left li{ margin:2px 0; background:rgba(255,246,0,1); padding:6px 20px; list-style:none; position:relative; transition:all .2s; } ul li:after{ content:'Cамое лучшее у нас на проекте'; position:absolute; display:block; width:100%; height:100%; left:110%; top:0; background:yellow; line-height:27px; opacity:0; } ul li:before{ content:""; border:16px solid transparent; border-right:16px solid yellow; position:absolute; right:-24px; top:0px; opacity:0; } ul li:hover:after{ opacity:1; } ul li:hover:before{ opacity:1; } ul li:after, ul li:before{ transition:all .5s; } .right{ width:50%; float:left; position:relative; z-index:100; margin-left:50px; border:1px solid ; padding:10px 20px; background:rgba(0,0,0,.2); color:#fefefe; } 
     <div class="wrapper"> <div class="left"> <ul> <li><a href="">Пункт меню 1</a></li> <li><a href="">Пункт меню 2</a></li> <li><a href="">Пункт меню 3</a></li> </ul> </div> <div class="right"> <div class="post"> <p> Curabitur aliquet quam id dui posuere blandit. Sed porttitor lectus nibh. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Proin eget tortor risus. Nulla quis lorem ut libero malesuada feugiat. </p> </div> </div> </div>