How to wrap text on background image with css - html

Question

I want to locate sidebar on to the background image. But following code gives me the sidebar below the image. How can I solve it?
<div class="image_container_1">
<img src="assets/images/wallpaper1.jpg" alt="wallpaper1" no-repeat center center fixed height="50%">
<div class="sidebar" style="position: absolute" >
<ul>
<li>news</li>
<li>ratings</li>
</ul>
</div>
</div>
Folowing is the css code.
.image_container_1{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: opacity(0.7);
}
.sidebar{
position: fixed;
width: 30%;
height: 100%;
background-color: black;
}

Answer 1

If you want to set sidebar on the image you can set sidebar css position:absolute and image css position:fixed.
.image_container_1{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
filter: opacity(0.7);
}
.sidebar{
position: absolute;
}
#banner{
position:fixed;
height:80px;
}
<div class="image_container_1">
<img src="https://ihud.org/wp-content/uploads/2019/11/banner-png-3.png" alt="wallpaper1" id="banner">
<div class="sidebar">
<ul>
<li>news</li>
<li>ratings</li>
</ul>
</div>
</div>