positioning several background layers-CodePudding

I have a div container that takes up 100% of the width of the browser window. The height of the container changes with the window width. I want to use two images as background images. Horizontally: The first image should occupy the left half of the background, and the second image should occupy the right half.

In the vertical, the left picture should take up 90% of the height of the wrapper and the right picture only 70% of the height of the wrapper. The fact that the images will be distorted is not a problem, they are simple .jpgs that only have one colour.

In other words: The first layer starts in the top left corner, goes (horizontally) to the middle and takes vertically 90% of the space. The second layer starts (horizontally) in the middle, goes until the top right corner and takes (vertical) 70% of the space.

The code that I have now doesn't work, but I don't know if I can achieve what I want with CSS.

#wrapper {
  background-image: url(/img1.jpg), url(img2.jpg);
  background-repeat: no-repeat, no-repeat; 
  background-position: 0 0, 50% 0;
  background-size: 50% 90%, 50% 70%;
}

<div id="wrapper">...here my content</div>

Is it possible to do that? And if yes: How I can do it?

CodePudding user response：

HTML Code:

<!DOCTYPE html>
<html lang="de" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>My HTML</title>
    <link rel="stylesheet" href="Test.css">
  </head>
  <body>
    <div >
      <img id="img1" src="img1.jpg">
      <img id="img2" src="img2.jpg">
    </div>
  </body>
</html>

CSS Code:

* {
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: red;
}
div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: black;
}
#img1 {
  height: 90%;
}
#img2 {
  height: 70%;
}

This should do the trick :)

CodePudding user response：

The background image set at 50% will be centered (so part of it is hidden under the first background image).

This snippet positions the second background image to the right and the first to the left.

[This snippet uses linear-gradients as images just to prove that it works OK].

#wrapper {
  background-color: pink;
  background-image: linear-gradient(red, red), linear-gradient(blue, blue);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 50% 70%, 50% 50%;
  height: 100vh;
  /* added so we can see some height */
  width: 100vw;
}

<div id="wrapper">...here my content</div>