title: Css - image on mobile is disrupted
body: <p>I'm creating my own portfolio website and I on mobile my background images behave strangely. When I'm discovering page sometimes background-image works perfectly and sometimes It looks really bad. </p>
  
  <p>I have been asking once but this approach is not fixing my issue.</p>
  
  <p><a href="https://stackoverflow.com/questions/54463499/css-how-to-stop-image-scalling-with-size-cover">Css - how to stop image scalling with size cover?</a></p>
  
  <p>Website: <a href="https://jozefrzadkosz-portfolio.pl" rel="nofollow noreferrer">https://jozefrzadkosz-portfolio.pl</a></p>
  
  <p>CSS Class on desktop:</p>
  
  <pre><code>.background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('~/header_train.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      filter: brightness(30%) sepia(0.3);
      -webkit-filter: brightness(30%) sepia(0.3);
    }
  </code></pre>
  
  <p>and on mobile:</p>
  
  <pre><code>@media only screen and (max-width: 768px) {
    header {
      .background-image {
        background-attachment: initial;
      }
    }
  }
  </code></pre>
  
  <p>Pictures of background image shooted on mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/a6LWC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a6LWC.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/4b2QS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4b2QS.jpg" alt="enter image description here"></a></p>