How to achieve a design style like this?

I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.

What is the name of this design "style" and how do I achieve the effect with css and html?

I tried to recreate the design with HTML and css. here is the code

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

/*BG*/

main,
.container {
  height: 100vh;
  width: 100vw;
}

body {
  overflow: hidden;
}

#left-top,
#left-bottom,
#right {
  position: absolute;
  z-index: -10;
}

#left-top {
  left: 0;
  top: 0;
}

#left-bottom {
  left: 0;
  bottom: 0;
  transform: translate(-0.5vw);
}

#right {
  right: 0;
  top: 0;
  bottom: 0;
  transform: translate(10vw);
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  max-height: 100vh;
  max-width: 100vw;

  border: 1vh solid lime;
}

.logo {
  max-width: 50%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  width: 80vw;
  height: inherit;
}

.links {
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <main>
      <div class="container">
        <img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
        <img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
        <img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
        <div class="logo">
          <img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
        </div>
        <div class="links">
          <ul>
            <li>
              <a href="">Kontakt</a>
            </li>
            <li>
              <a href="">Produkter</a>
            </li>
            <li>
              <a href="">om oss</a>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

Whenever I zoom the absolute position background pieces shifts like this.

What is the best way to achieve this design and what is the name of the style?

Solution

* {
  margin: 0;
  padding: 0;
  box-sizing: 0;
}

/*BG*/

main,
.container {
  height: 100vh;
  width: 100vw;
}

body {
  overflow: hidden;
}

#left-top,
#left-bottom,
#right {
  position: absolute;
  z-index: -10;
}

#left-top {
  left: 0;
  top: 0;
  width: 20vw;
}

#left-bottom {
  left: 0;
  bottom: 0;
  height: 50vh;
}

#right {
  right: 0;
  top: 0;
  bottom: 0;
  height: 100vh;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  max-height: 100vh;
  max-width: 100vw;
}

.logo {
  max-width: 70vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.logo img {
  top: 45vh;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  width: 100%;
  height: inherit;
  z-index: -10;
}

.links {
  margin: 51vh auto auto 7vw;
  width: 110vw;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
}

.link-text {
  width: 100%;
  text-align: center;
}

.link-text a {
  text-decoration: none;
  color: #777;
  font-size: 1.25vw;
  font-family: helvetica;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <main>
      <div class="container">
        <img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
        <img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
        <img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
        <div class="logo">
          <img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
        </div>
        <div class="links">
          <div class="link-text"><a href="">Kontakt</a></div>
          <div class="link-text"><a href="">Produkter</a></div>
          <div class="link-text"><a href="">om oss</a></div>
        </div>
      </div>
    </main>
    <script src="main.js"></script>
  </body>
</html>

In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.

Explanation

1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...

2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.

3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids

4- I styled few things with css (mainly the link section) which you can go through in your code...

The above was just a brief overview.