Search code examples
csstwitter-bootstrapbackgroundtranslate-animation

Background color diagonal split responsive

I'm using Bootstrap.

I need to achieve this result : enter image description here

For that I started doing this :

<body>
    <div id="diagonal-bg"></div>
</body>

#diagonal-bg{
  position: absolute;
  left: -800px;
  width: 200%;
  min-height: 700px;
  background-image: -webkit-linear-gradient(118deg, #fff 35%, #8aa8ec 35%);
}

It works almost because as soon as I resize my window here is what I get : enter image description here

How can I have distances A and B to be always the same across different size of screen/window, to make it responsive.

Thanks

Solution

  • I've resolved my issue :

    <div class="background">
      <div class="top"></div>
      <div class="bottom"></div>
</div>

.background {
  position: absolute;
  width: 100%;
  margin: 0 auto;
}
.top {
  height: 100px;
  background-color: #23d6c5;
}
.bottom {
  width: 100%;
  height: 500px;
  background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);
}


    body{
  background-color: white;
}

.background {
  position: absolute;
  width: 100%;
  margin: 0 auto;
}
.top {
  height: 100px;
  background-color: #2f3441;
}
.bottom {
  width: 100%;
  height: 500px;
  background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);
}
    <div class="background">
  <div class="top"></div>
  <div class="bottom"></div>
</div>