html - How to provide background color to half of two div?

Question

.bg {
  background-color: gray;
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>

question from:https://stackoverflow.com/questions/65915229/how-to-provide-background-color-to-half-of-two-div

Answer 1

You can make use of linear-gradient for background.

.bg {
  background: linear-gradient(to bottom, #ddd 50%, #9A8D6D 50%); /* Go towards the bottom, Cover #ddd for 50%, Cover #9a8d60 for the other half */
  height: 200px;
}

<div class="bg">
  <div>
    <img src="https://s3.amazonaws.com/images.seroundtable.com/google-rainbow-texture-1491566442.jpg" style="width:200px">
  </div>
  <div>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:200px">
  </div>
</div>