Help me out devs. I want to create a layout in which there are two divs which have a shared background image. You can see the following image as a reference

HTML-CSS
1

Screenshot 2024-07-23 161437
Screenshot 2024-07-23 161437978×629 56.6 KB

2

Hello, can you post some code, mainly the HTML & CSS if you have any.

3

Hello,
There are many approaches to such a situation, one of which is to think of it as a container div that has another div inside of it that will act as a separator between two sections covered by the same background image
Consider this code

<div class="container">
  <div class="middle-line"></div>
</div>

.container {
/*  you can add this code in a codepen to see it, the url used here will generate a random image automatically  */
  width: 100%;
  height: 600px;
  background-image: url("https://picsum.photos/1000/600");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.middle-line {
  height: 100%;
  width: 10px;
  background-color: white;
  margin-inline: auto;
  z-index: 2;
}

One important thing to remember here is that the usage of the z-index is mandatory because the background image will be on top of the empty div however one drawback of this approach is that you cannot add text on top of the image

You can change the code above and work with two or more children divs, in this case, you may want to use flexbox to make them on one line, then draw the separator (that one white line like that in your reference image using either the border-left or border-right of a child div), these changes will allow you to add content to the divs inside of the container while maintaining the original context of having one background image spanning across two divs or more