Image sticks out of border-CodePudding

The image goes out of a white border and I want it to be inside:

body {
  margin: 0px;
}

div.container {
  height: 100vh;
  background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.whitebox {
  position: relative;
  left: -5%;
  width: 75%;
  height: 75%;
  background-color: white;
  border-radius: 3%;
}

div.titleclass {
  position: relative;
  height: 30vh;
  overflow: hidden;
}

div.overlay {
  position: absolute;
  background-color: #bdb76b6b;
  background-image: url("https://i.imgur.com/vah2G4d.jpeg");
  background-blend-mode: screen;
  background-size: cover;
  opacity: 0.9;
  transform: rotate(7deg) translate(-2.3%, -20%);
  height: 50vh;
  width: 105%;
}

div.title {
  font-family: "Rockwell";
  font-size: 3.5vw;
  text-align: left;
  color: #006400;
  font-weight: 400;
  font-style: normal;
  position: relative;
  top: 25px;
  left: 20px;
}

<div >
  <div >
    <div >
      <div >
        <div ></div>
        <div >MODULO ISCRIZIONE SOFTAIR</div>
      </div>
    </div>
  </div>
</div>
<script src="Modulo_softair_rework.js"></script>

CodePudding user response：

get rid of height:75% and use top to reposition

body {
  margin: 0px;
}

div.container {
  height: 100vh;
  background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.whitebox {
  position: relative;
  left: -5%;
  top:-25%;
  width: 75%;
  
  background-color: white;
  border-radius: 3%;
}

div.titleclass {
  position: relative;
  height: 30vh;
  overflow: hidden;
}

div.overlay {
  position: absolute;
  background-color: #bdb76b6b;
  background-image: url("https://i.imgur.com/vah2G4d.jpeg");
  background-blend-mode: screen;
  background-size: cover;
  opacity: 0.9;
  transform: rotate(7deg) translate(-2.3%, -20%);
  height: 50vh;
  width: 105%;
}

div.title {
  font-family: "Rockwell";
  font-size: 3.5vw;
  text-align: left;
  color: #006400;
  font-weight: 400;
  font-style: normal;
  position: relative;
  top: 25px;
  left: 20px;
}

<div >
  <div >
    <div >
      <div >
        <div ></div>
        <div >MODULO ISCRIZIONE SOFTAIR</div>
      </div>
    </div>
  </div>
</div>
<script src="Modulo_softair_rework.js"></script>

CodePudding user response：

Add overflow:hidden to parent div which has the border radius.

body {
  margin: 0px;
}

div.container {
  height: 100vh;
  background-image: url("https://i.imgur.com/AQI5SzX.jpeg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

div.whitebox {
  position: relative;
  left: -5%;
  width: 75%;
  height: 75%;
  background-color: white;
  border-radius: 3%;
  /*here is the change */
  /*here is the change */
  /*here is the change */
  overflow: hidden;
}

div.titleclass {
  position: relative;
  height: 30vh;
  overflow: hidden;
}

div.overlay {
  position: absolute;
  background-color: #bdb76b6b;
  background-image: url("https://i.imgur.com/vah2G4d.jpeg");
  background-blend-mode: screen;
  background-size: cover;
  opacity: 0.9;
  transform: rotate(7deg) translate(-2.3%, -20%);
  height: 50vh;
  width: 105%;
}

div.title {
  font-family: "Rockwell";
  font-size: 3.5vw;
  text-align: left;
  color: #006400;
  font-weight: 400;
  font-style: normal;
  position: relative;
  top: 25px;
  left: 20px;
}

<div >
  <div >
    <div >
      <div >
        <div ></div>
        <div >MODULO ISCRIZIONE SOFTAIR</div>
      </div>
    </div>
  </div>
</div>
<script src="Modulo_softair_rework.js"></script>