CODEWITHSUNDEEP
htmlcsscss-transforms
Alberto Acuña
Alberto Acuña

Reputation: 535

Rotate background image height 100%

I'm trying to make my images responsive with some rotation angle (10deg) but my height is increasing too much, and it's not at center and full width.

This is the design (colors are background-image), as you can see, with the rotation, I can't fill all the top side and same with bottom, and another problem, is my full height increase.

Structure

*CSS: CODE

.rotate > div {
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
.rotate > div > div > div {
   transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .list {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .item {
    height: 50%;
  }
  .wrapper {
    width: 100%;
    height: 100%;
  }

Thank you so much guys.

Upvotes: 0

Views: 702

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

Use the images within a pseudo element and allow some overflow to cover the white space:

body {
 margin:0;
 min-height:500px;
 height:100vh;
 overflow:hidden;
}
.box {
  height:50%;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:-40%;
  left:-10%;
  right:-10%;
  bottom:-40%;
  transform:rotate(-10deg);
  background:var(--i) center/cover no-repeat;
}
.box.first::before {
  bottom:0;
}
.box.last::before {
  top:0;
}
<div class="box first" style="--i:url(https://picsum.photos/1000/800?image=0)">

</div>
<div class="box last" style="--i:url(https://picsum.photos/1000/800?image=1069)">

</div>

Upvotes: 1

Related Questions