Good day. There was a question at layout layout. There are two divs with different backgrounds. In the layout, one of the sections "runs over" the other (picture in the attachment). The question is, how do I put them on top of each other? What would the "corner" of the top hit the bottom background? thank maket

.about { height: 392px; width: 100%; background: #fff url("../img/about_bg.png") no-repeat 50% 100%; text-align: center; .benefits { height: 554px; background: #0099cc url("../img/benefits_bg.jpg") no-repeat 50% 100%; }

I tried to do this with the help of z-index, but the bottom background was cut off on the "edge" of the top.

  • 2
    You can try a negative margin-top for the bottom layer or set the bottom layer position: relative; top: -20px; position: relative; top: -20px; and do not forget to register z-index for layers. - Dmitriy Kondratiuk
  • Thank you, I did. But, it turns out that the triangle at the upper layer also disappears ... And it’s necessary that it remain. - Igor Lut
  • Give a link or code to what is. - HamSter
  • link link to what is obtained. And the CSS code is in the question text. Or some other code is needed? Thank you - Igor Lut
  • jsfiddle.net/soledar10/5aa8bk99 or use the image corner - soledar10 Sept

2 answers 2

Pseudo-variant:

 .about { height: 32px; width: 100%; background: url("../img/about_bg.png") no-repeat 50% 100%; text-align: center; border: 1px solid red; } .about:before { content: ""; border-top: 20px solid #ffffff; border-right: 40px solid transparent; border-left: 40px solid transparent; margin-left: -20px; position: absolute; top: 42px; -left: 50%; } .benefits { height: 44px; background: #0099cc url("../img/benefits_bg.jpg") no-repeat 50% 100%; } 
 <div class="about"></div> <div class="benefits"></div>

  • Thank. The task was not solved by 100%, but I understood how to beat it all. - Igor Lut

Here is an example using z-index :

 .about { height: 32px; width: 100%; background: url("../img/about_bg.png") no-repeat 50% 100%; text-align: center; position: relative; z-index: 20; border: 1px solid red; } .benefits { height: 24px; background: #0099cc url("../img/benefits_bg.jpg") no-repeat 50% 100%; position: relative; top: -10px; z-index: 19; } 
 <div class="about"></div> <div class="benefits"></div>