How to place an image on top of another-CodePudding

I would like to know how I can make my login page have a background image, and on top of that background image a rectangular image, and next to that second image, my login panel. This way: image example

The orange color image would be my background image. The blue colored image would be my second image, which would be on top of the background image. And the third pink image would be my login component.

I'm using react js and typescript and I don't have much experience with programming and styling. I would really appreciate your help

EDIT My code

style.ts

export const ContainerMain = styled(Grid).attrs({
  container: true,
})`
  height: 100vh;
`;

export const ContainerImagem = styled(Grid).attrs({
  item: true,
})`
  top: 0px;
  left: 0px;
  width: 2030px;
  height: 1142px;
  background-size: 'cover';
`;

export const ContainerLogin = styled(Grid).attrs({
  item: true,
})`
  top: 226px;
  left: 1242px;
  width: 520px;
  height: 528px;
  display: 'center';
  opacity: 1;
  border-radius: 4px;
  background-color: var(--white-100);
`;

  return (
    <ContainerMain>
      <Hidden lgDown>
        <ContainerImagem xs={12}>

          <img src={backg1} />
          <img src={backgr2} />



        </ContainerImagem>
      </Hidden>

      <ContainerLogin sm={12} md={12} xs={12} lg={6} xl={6}>
        <motion.div
          animate={{ x: [100, 0] }}
          transition={{ type: 'spring', stiffness: 5 }}
        >
          {children}
        </motion.div>
      </ContainerLogin>
    </ContainerMain>
  );
};

CodePudding user response：

You can do a lot with a flex and aligning withing with components being position: absoulte;

Check out what I did here:

#wrap{
  display: flex;
  align-items: center;
}

#container{
  align-items: center;
  display: flex;
  position: relative;
}


#img2 {
  position: absolute;
  left: 25%;
}


#containerlogin {
  position: absolute;
  background: pink;
  z-index: 2;
  left: 50%;
  width: 150px;
  height: 100px;
}

<div id="wrap">
 <div id="container">
  <img id="img1" src="https://external-content.duckduckgo.com/iu/?u=http://blog.theologika.net/wp-content/uploads/2013/05/Orange-Tabby-Cat_Big-Cat_14052-480x320-by-Robert-and-Mihaela-Vicol.jpg&f=1&nofb=1">
  <img id="img2" src="https://external-content.duckduckgo.com/iu/?u=https://viola.bz/wp-content/uploads/2012/06/Archangel-Blue-cat-4-150x150.jpg&f=1&nofb=1">
 
 <div id="containerlogin">This will be your login stuff</div>
 </div> 
</div>