enter image description here

the question arose how to create this layout, because the photo in the middle is located both in the header and in the section.

  • Well located, okay, but the problem is, what's wrong? - andreymal
  • I don’t really understand how to design it, so that the floor of the photo was in the section, and the other in the header is Vasily Pelikan
  • There is an img tag, there is a background-image in css, if this is a dynamic graph, you can duplicate svg tags here and there. I still don’t understand what difficulties you are having - andreymal
  • so if I have a tag in the header, then the photo will be completely located on a blue background, and if in a section, then, on the contrary, on white. but I do not understand how to make 1 photo be both there and there, because if you duplicate, then there will be just 2 identical pictures on 2 backgrounds - Vasily Pelikan
  • Do you have a problem with header and section overlapping? Just put a section on top of the header using a negative margin-top or position: relative for example - andreymal

1 answer 1

If the question is about a picture on the background, then you can overlay it, for example, using a negative margin-top

In the example below margin: -180px auto 8px; - the first -180px sets a negative border on top and thus creates an overlay on the previous block, auto sets automatic borders on the left and on the right and thereby aligns it on the center of the page, 8px border on the bottom for beauty so that the shadow is not cut off

 html, body { margin: 0; padding: 0; font-family: Arial, sans-serif; } .header-main { height: 360px; background-image: url(https://i.stack.imgur.com/HiWEK.jpg); background-size: cover; background-position: center center; color: white; } .header-main > h1 { text-align: center; margin: 0; padding: 60px 0; } .section-1 { /* Вся суть здесь */ width: 400px; margin: -180px auto 8px; height: 400px; box-shadow: 0 0 4px black; background-color: #f2f2f2; } 
 <header class="header-main"> <h1>Добро пожаловать</h1> </header> <section class="section-1"> Привет, мир<br/> <img src="https://i.stack.imgur.com/oqrem.jpg" alt="" /> </section>