There is a task when changing the screen to 320px to change the picture, how to do it correctly There is a cap and the picture should be displayed in HTML not through css For example, there is such a construction

.header { min-height: 100vh; background-size: cover; background-position: center; position: relative; } 
 <header class="header" style="background-image: url(img/bg.jpg);"> <div class="main-container"> <nav> <div class="logo">logo</div> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> </header>

I thought as an option to make one more block for the mobile version, with another picture hide and show another.
How to do? Throw an idea.

    2 answers 2

    See this option will satisfy you or not:

    HTML

     <header> <div class="main-container"> <nav> <div class="logo">logo</div> <ul class="menu"> <li><a href="">Home</a></li> <li><a href="">About</a></li> <li><a href="">Services</a></li> <li><a href="">Contact</a></li> </ul> </nav> </div> </header>


    CSS

     header { background: url(img/bg.jpg); background-size: 100% 100%; height: 100vh; } @media screen and (max-width: 320px) { header { background: url("Ссылка на вторую фотографию"); } } 

       if (window.innerWidth <= 320) { document.getElementById("logo").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Yandex_logo_ru.svg/2000px-Yandex_logo_ru.svg.png"; } 
       <img src="https://www.google.ro/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="logo">

      • Thanks for the answer, but I need to replace the image in the header <header class = "header" style = "background-image: url (img / bg.jpg);"> - Viorel