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>

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;
}