how can i fix this background bug?

November 4, 2021

I just wanna know how can I fix this background issue? It starts repeating from the top and bottom of the .box. is there any solution?

So this is my HTML:

<body>
 <div class="box">
  <img src="https://s4.uupload.ir/files/e8hzocoxsamec01-removebg-preview_wxkl.png" width="100px"> <be>
  I love Unicorns!
</div>

And my CSS:

html, body {
  font-family: 'Zen Kurenaido', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: hsla(229, 86%, 81%, 1);
  background-image: linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -moz-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  background-image: -webkit-linear-gradient(225deg, hsla(229, 86%, 81%, 1) 0%, hsla(246, 80%, 75%, 1) 28%, hsla(318, 80%, 79%, 1) 69%, hsla(30, 80%, 75%, 1) 100%);
  height: 100%;
}

.box {
  background-color: #ffffff;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
  padding: 18px;
  width: 400px;
  height: 300px;
}

This is also my codepen: Codepen