Rounded corners on div have background-image CSS

Question

I want to make a white header with rounded corner over an image like below

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body{
 background-color: black; // as an image
}
img {
  width: 100%;
}

.whihte_sticker1 {
  height: 50px;
  background-color: white;
}

.whihte_sticker2 {
  height: 20px;
  background-color: white;
  width: 80%;
  margin: auto;
}

<article>
  <div class="whihte_sticker1"></div>
  <div class="whihte_sticker2"></div>
  <img src="./img/slider1.png" alt="" />
</article>

If you have an idea or could you help, I would appreciate that!