Hello! How can I make a background through img with a fixed location, at any resolution?

.b-background-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } img { max-width: 100%; height: auto; } 
 <div class="b-background-image"> <img src="/images/inhtml/catalog_bg.jpg" alt="" title="" class="b-background-image__image"> </div>

    1 answer 1

    It is enough to give the image a fixed positioning and z-index less than the main text. A bunch of test divs are provided for clarity. Whole essence in css

     .b-background-image { position: absolute; width: 100%; height: 100%; top: 0; left: 0;} img.b-background-image__image { position: fixed; width: 100%; z-index: -1; } 
     <div class="b-background-image"> <img src="https://cdn.sstatic.net/Sites/ru/img/sprites.png" alt="" title="" class="b-background-image__image"> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asd3f</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf</div> <div class="test">asdf-end</div> </div>