title: How to prevent background-image from zooming on mobile browser when adding elements vertically?
body: <p>I have a ReactJS app in which I add elements vertically from up to down when I press on button "Post". </p>
  
  <p><a href="https://i.stack.imgur.com/KwPYV.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KwPYV.jpg" alt="enter image description here"></a></p>
  
  <p>When  I add the elements, they are well displayed on mobile and desktop browser. </p>
  
  <p><strong>BUT</strong>, on the mobile browser, the background image keeps zooming every time I add an element.</p>
  
  <p><a href="https://i.stack.imgur.com/OGfCO.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OGfCO.jpg" alt="enter image description here"></a></p>
  
  <p>I chose to use Jquery in my <code>public/index.html</code> because I need it to change randomly my background image thanks to a function I have (I cannot call a js function inside the <code>url()</code> for <code>background-image</code> in a CSS file). </p>
  
  <p>I have the following as well for my desktop version and it works, so I know I have to modify my CSS here:</p>
  
  <pre><code>$(document).ready(function() {
    const randomImage = chooseBackground();
    if ($(window).width() &lt; 650) //mobile browser
    {
      $('html, body').css('background-image', `url(${randomImage})`);
      $('html, body').css('background-repeat', 'no-repeat');
      $('html, body').css('background-attachment', 'fixed');
      $('html, body').css('background-size', 'cover');
      $('html, body').css('background-position', 'center');
    }
  });
  </code></pre>
  
  <p><strong>My objective is to have the background image fixed without moving and zooming on Mobile, and be able to scroll down to see all the elements I added.</strong></p>