Two divs share a background Image

Rob Terrell 0
Viewed 58

I am attempting to duplicate the following screenshot:

https://i.stack.imgur.com/HJwou.png

Where the background image sits between two separate colored divs. I have attempted to use absolute positioning, but the issue I run into is the image covers text and other divs, etc. Any and all guidance would help immensely on how to achieve this. A minimal example would be the following code:

  <div style={{ positon: "relative", zIndex: 0 }}>
      <div style={{ backgroundColor: "red", height: 500, width: "100%" }}></div>
      <div
        style={{ backgroundColor: "blue", height: 500, width: "100%" }}
      ></div>
      <div
        style={{
          backgroundRepeat: "no-repeat",
          backgroundPosition: "cover",
          backgroundImage: `url(${Squiggle1})`,
          height: 600,
          width: 451,
          position: "absolute",
          top: 250,
          bottom: 0,
          right: 0,
          zIndex: -1
        }}
      />
    </div>

attached is a code sandbox for debugging: https://codesandbox.io/s/empty-sunset-tchcup?file=/index.css

css html
2 Answers

To get the three backgrounds (red, blue, squiggle) beneath the two divs we can put them as background to the container div.

This snippet also makes things a bit more responsive by not building in the heights of the two inner divs, just giving them each 50% of the height of their parent.

You can of course put back the fixed width of the container if that is required. This snippet just uses a width of helf the viewport and height of the whole viewport as a demo.

Note that in order to get the look that was shown in the original snapshot in the question the squiggle image had to have some of its top part, which was just blank, cut off so it could be seen going up the right hand side.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Squig</title>
  <link href="index.css" rel="stylesheet" type="text/css" />
  <style>
    * {
      margin: 0;
    }
    
    .container {
      background-repeat: no-repeat;
      background-position: right top, left top, left bottom;
      background-size: 50% 100%, 100% 50%, 100% 50%;
      background-image: url(https://i.stack.imgur.com/qtQZn.png), linear-gradient(red, red), linear-gradient(blue, blue);
      width: 50vw;
      height: 100vh;
    }
    
    .container>* {
      width: 100%;
      height: 50%;
    }
  </style>
</head>

<body>
  <div class="container">
    <div>
      TEXT ABOUT PRODUCTS
    </div>
    <div>
      TEXT ABOUT HOW IT WORKS
    </div>
  </div>
</body>

</html>

A Haworth0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        position: relative;
      }
      .first {
        background-color: red;
        height: 100px;
        width: 200px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .second {
        background-color: blue;
        height: 100px;
        width: 200px;
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .main {
        width: 100vw;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: right;
        background-image: url(squiggle.png);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="first">
        TEXT ABOUT PRODUCTS
      </div>
      <div class="main"></div>
      <div class="second">
        TEXT ABOUT HOW IT WORKS
      </div>
    </div>
  </body>
</html>

Is this the code you are looking for!

ravi0
Related