html - Give two background colors to a div

Question

I would like to have two separate backgrounds behind my div .login-section

Sample HTML:

<div class="login-container">
  <div class="login-section"></div>
</div>

I want to give two different background color to the .login-container div as shown in the image

Answer 1

You can use linear-gradient background.

.bg {
  height: 100vh;
  background: linear-gradient(#03a2e8 0%, #03a2e8 40%, #eeeeef 40%);
}

<div class="bg"></div>