img not stretching to wrappers height and width - html

Question

I'd like to have a wavy background on top of my regular background but the image is not stretching all the way out. It has to be position absolute (otherwise it's interfering with my navigation and moves it down by the height of the img). JSFiddle. I already tried object-fit: fill which also didn't work. Thanks in advance
My code:
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>

Answer 1

Instead of applying css to #background apply it in #background img thats where you want to change object fit property.
replace this
#background {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
with this
#background img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 15%;
}
You can check the output below
* {
margin: 0;
padding: 0;
font-family: helvetica;
}
body {
height: 5000px;
}
#background img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: ;
opacity: 15%;
}
#navwrapper {
background: linear-gradient(250deg, #0061ff, #60efff);
background-size: 400% 400%;
-webkit-animation: AnimationName 10s ease infinite;
-moz-animation: AnimationName 10s ease infinite;
animation: AnimationName 10s ease infinite;
height: 100vh;
}
#-webkit-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#-moz-keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
#keyframes AnimationName {
0% {
background-position: 0% 7%
}
50% {
background-position: 100% 94%
}
100% {
background-position: 0% 7%
}
}
<nav id="navwrapper">
<div id="background"><img src="https://i.postimg.cc/RZzwCTQz/Zeichenfla-che-92.png"></div>
</nav>

Answer 2

Use this property
#background{
background:url(...);
background-position: center !important;
background-size: cover !important;
background-repeat: no-repeat;
height: 500px;
width:100%
}

Answer 3

You can just set width and height to 100% for an image that it should all space of container:
#background img {
width: 100%;
height: 100%;
}