Can't remove background attachment from header in JS

Question

I'm trying to remove the background attachment fixed from my header img when the website is on mobile. But right now I'm just testing it on my desktop. I have the header here const header = document.querySelector('header'); and I simply added header.style.removeProperty('background-attachment'); but when I refresh the page the header background image is still fixed?? Any Ideas.

P.S I've been told that mobile doesn't support background-attachment: fixed; as well as background-size: cover;

Is this true? or is it just the one?

const ham = document.querySelector('.ham-menu');
const nav = document.querySelector('nav');
const header = document.querySelector('header');
const promise = document.querySelector('.promise');
const services = document.querySelector('.services');
const testimony = document.querySelector('.testimony');

header.style.removeProperty('background-attachment');

//detect mobile
// if ("ontouchstart" in document.documentElement) {
//   removeProps(header);
//   removeProps(promise);
//   removeProps(services);
//   removeProps(testimony);
// }

ham.addEventListener('click', animateMenu);

function animateMenu() {
 nav.classList.toggle('hamburger-open');
}

// function removeProps(node) {
//  node.style.removeProperty('background-attachment');
//  node.style.removeProperty('background-size');
// }

* {
 box-sizing: border-box;
}

body, html {
 margin: 0;
 padding: 0;
}

/*---HEADER---*/

li a {
 text-decoration-line: none;
 color: rgba(102,102,102,0.75);
}

input {
 -webkit-appearance: none;
 -webkit-border-radius:none;
}

header {
 background-image: url(https://images.pexels.com/photos/984541/pexels-photo-984541.jpeg?cs=srgb&dl=blank-cement-concrete-984541.jpg&fm=jpg);
 height: 100vh;
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 display: flex;
 justify-content: center;
 align-items: center;
}

nav {
 background-color: white;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 3;
 box-shadow: 0px 0px 100px grey;
 transition: all .5s ease;
}

.ham-nav a {
 display: none;
}

nav ul {
 margin-right: 0px;
 margin-top: 25px;
}

li {
 display: inline-block;
 font-size: 1.55rem;
 margin-right: 20px;
 font-family: 'Rajdhani';
}

li a:hover {
 cursor: pointer;
 color: #1a1a1a;
 transition: all 0.7s ease;
}

.after:after {
 position: relative;
 left: 12px;
 top: 2px;
 display: inline-block;
 content: "";
 width: 1px;
 height: 20px;
 background-color: rgba(102,102,102,0.25);
}

.logo { 
 width: 225px;
 height: 74px;
 margin-bottom: 5px;
 margin-top: 2px;
 margin-left: 5px;
}

.phrase {
 text-align: center;
}

.phrase p {
 color: white;
 font-size: 3.5rem;
 font-family: 'Arvo';
 margin-bottom: 30px;

}

.phrase a {
 background-color: red;
 border-radius: 25px;
 color: white;
 font-family: 'Bitter';
 font-size: 1.8rem;
 padding-left: 15px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-top: 10px;
 transition: all 0.2s ease;
 text-decoration: none;
}

.phrase a:hover {
 transition: all 0.5s ease;
 background-color: #cc0000;
 cursor: pointer;
}

.phrase .fas {
 display: block;
 color: white;
 font-size: 3.5rem;
 margin-top: 15px;
}

/*---PROMISE---*/

.stats {
 width: 100%;
 display: flex;
 box-shadow: 0px 0px 150px grey;
 position: relative;
 z-index: 1;
 background-color: white;
}

.stats div {
 display: inline-block;
 flex-basis: 35%;
 text-align: center;
 padding-bottom: 30px;
}

.stat-info {
 font-size: 2rem;
 color: rgba(102,102,102, 1);
 font-family: 'Rajdhani';
 margin-bottom: 0;
 margin-top: 10px;
}

.stat-num {
 color: red;
 font-family: 'Rajdhani';
 font-size: 3rem;
 margin: 0;
 font-weight: bolder;
}

.stats div:before {
 display: inline-block;
 content: '';
 width: 2px;
 height: 35px;
 background-color: rgba(102,102,102, 0.60);
}

.promise {
 width: 100%;
 background-image: url(concrete.jpg);
 background-position: center;
 background-attachment: fixed;
 background-size: cover;
}

.promise .wrapper {
 width: 100%;
 background-color: rgba(0, 0, 0, 0.3);
}

.promise h1 {
 position: relative;
 top: 40px;
 color: white;
 font-family: 'Montserrat';
 font-weight: bolder;
 font-size: 3.5rem;
 text-align: center;
 margin-top: 0;
 word-spacing: 7px;
 text-shadow: 0px 0px 100px grey;
}

.promise p {
 color: white;
 font-size: 1.8rem;
 font-family: 'Rajdhani';
 margin-bottom: 0;
 padding-bottom: 60px;
 text-align: center;
 margin-top: 40px;
 padding-left: 50px;
 padding-right: 50px;
}

/*---FOOTER---*/

.footer .wrapper {
 display: flex;
}

.footer div {
 display: inline-block;
 flex-basis: 29%;
 font-family: 'Rajdhani';
 color: rgba(102,102,102, 1);
 margin-top: 5px;
 justify-content: space-around;
}

.footer h1 {
 font-size: 2rem;
 margin-top: 15px;
}

.social .inner {
 width: 100%;
}

.footer .inner:before {
 display: inline-block;
 content: '';
 width: 29%;
 height: 2px;
 background-color: rgba(102,102,102, 0.6);
 position: absolute;
 margin-top: 54px;
}


.footer h1 span {
  display: inline;
  position: relative;
}

.footer h1 span:after {
  content: '';
  height: 2px;
  width: 100%;
  background-color: red;
  position: absolute;
  bottom: 0;
  left: 0;
}

.wrap:before {
 content: '';
 width: 100px;
 height: 2px;
 background-color: red;
 position: absolute;
 margin-top: 55px;
}

.links a {
 display: block;
 text-decoration-line: none;
 color: rgba(102,102,102, 1);
 font-size: 1.1rem;
 position: relative;
 top: -17px;
 transition: color 0.4s ease;
}

.links a:hover {
 color: red;
}

.contact p {
 position: relative;
 top: -10px;
}

.social i {
 font-size: 1.7rem;
 margin-right: 5px;
 position: relative;
 top: -20px;
 color: rgba(102,102,102, 0.7);
 transition: all 0.4s ease;
}

.social i:hover {
 color: red;
 cursor: pointer;
}

#msg {
 margin-top: -15px;
}

.footer-textarea {
 background-color: rgba(102,102,102, 0.2);
 padding: 0;
 outline: none;
 font-size: 1.2rem;
 color: rgba(102,102,102, 1);
 resize: none;
 width: 99.5%;
}

.social #form {
 position: relative;
}

.footer button {
 background-color: rgba(102,102,102, 0.2);
 position: absolute;
 right: 0;
 top: -50px;
 border: none;
 font-family: 'Rajdhani';
 font-size: 1.2rem;
 transition: all ease 0.4s;
 outline: none;
}

button:hover {
 cursor: pointer;
 color: red;
}

.dark {
 color: red;
}

.copyright {
 position: absolute;
 background-color: white;
 text-align: center;
 width: 100%;
 margin-bottom: 0;
 font-size: 1.2rem;
 padding-bottom: 4px;
}



/*-------MEDIA QUERIES-------*/




@media screen and (min-width: 2460px) {

 /*---NAV---*/

 nav li {
  font-size: 3rem;
 }

 .logo {
  font-size: 8rem;
 }

 .after:after {
  width: 3px;
  height: 40px;
  margin-left: 5px;
  margin-right: 5px;
 }

 /*---MAIN---*/

 .phrase p {
  font-size: 6.8rem;
 }

 .phrase a {
  font-size: 3rem;
  padding: 15px;
  border-radius: 40px;
 }

 .phrase .fas {
  font-size: 6rem;
 }

 .stats div {
  padding-bottom: 60px;
 }

 .stats p {
  font-size: 5rem;
 }

 .stats div:before {
  height: 60px;
  width: 3px;
 }

 .promise h1 {
  padding-top: 40px;
  font-size: 7.5rem;
  margin-bottom: 70px;
 }

 .promise p {
  font-size: 3.7rem;
  padding-bottom: 100px;
 }

 /*---FOOTER---*/

 .footer h1 {
  font-size: 4.5rem;
  padding-top: 15px;
 }

 .footer h1 span:after {
  height: 4px;
 }

 .footer .inner:before {
  height: 4px;
  margin-top: 118.25px;
 }

 .links a {
  font-size: 2.5rem;
  top: -20px;
 }

 .social i {
  font-size: 3.5rem;
  margin-right: 10px;
  top: -40px;
 }

 .footer button {
  font-size: 2.5rem;
  margin-right: 14.25%;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: -37px;
 }

 .footer textarea {
  font-size: 2.5rem;
  width: 85%;
 }

 .contact p {
  font-size: 2.5rem;
  margin-bottom: 35px;
  margin-top: 35px;
 }

 .copyright {
  font-size: 2.5rem;
 }
}

/*---LAPTOP---*/

@media screen and (max-width: 1024px) {

 .phrase p {
  font-size: 3.2rem;
 }

 .phrase a {
  font-size: 1.5rem;
 }

 .phrase .fas {
  font-size: 3.1rem;
 }

 .stat-num {
  font-size: 2.5rem;
 }

 .stat-info {
  font-size: 1.8rem;
 }

 .promise p {
  font-size: 1.6rem;
 }

}

@media screen and (max-width: 1024px) and (min-height: 1366px) {

 /*---MAIN---*/

 header {
  height: 80vh;
 }
}

@media screen and (max-width: 823px) {

 /*---MAIN---*/

 .phrase p {
  font-size: 3rem;
 }

}

@media screen and (max-width: 829px) {

    @media screen and (max-width: 829px) {

    .footer .contact p {
  font-size: 1rem;
  margin-top: 6px;
  margin-bottom: 6px;
 }

 .footer textarea {
  font-size: 1rem;
 } 
} 
}



/*---TABLET---*/

@media screen and (max-width: 768px) {

 /*---MAIN---*/

 .phrase {
  top: 300px;
 }

 /*---FOOTER---*/

 .footer h1 span {
   display: inline;
   position: relative;
 }

 .footer h1 span:after {
   content: '';
   height: 2px;
   width: 100%;
   background-color: red;
   position: absolute;
   bottom: 0;
   left: 0;
 }

 .footer button {
  margin-left: 7.4%;
 }
}

@media screen and (max-width: 731px) {

 .promise p {
  font-size: 1.48rem;
 }

}

/*------LANDSCAPE-MODE-MOBILE------*/

@media screen and (max-width: 750px) {

 nav li {
  font-size: 1.27rem;
 }

 .logo {
     width: 190px;
     height: 66px;
 }

 .stat-num, .stat-info {
  font-size: 1.6rem;
 }
}

@media screen and (max-width: 715px) {
 
 /*---NAV---*/

 .phrase {
  margin-top: 30px;
 }

 .phrase p {
  font-size: 2.5rem;
 }

 .phrase a {
  font-size: 1.3rem;
 }
}

@media screen and (max-width: 650px) {
 .logo {
     width: 145px;
     height: 50px;
     margin-left: 0;
 }

 nav ul {
  padding-left: 0;
 }

 nav li {
     font-size: 1.2rem;
     margin-right: 15px;
 }
}

@media screen and (max-width: 640px) {
 /*---FOOTER---*/

 .footer h1 {
  font-size: 1.5rem;
 }

 .footer .inner:before {
  margin-top: 43px;
 }

 .links a {
  top: -14px;
 }

 .social i {
  font-size: 1.5rem;
  margin-right: 2px;
  top: -17px;
 }

 .footer button {
  top: -44px;
  font-size: 1rem;
 }
}

@media screen and (max-width: 586px) {

 /*---MAIN---*/

 .phrase p {
  font-size: 2.7rem;
 }
}

@media screen and (max-width: 568px) {

 /*---MAIN---*/

 .stat-num, .stat-info {
  font-size: 1.5rem;
 }

 .promise p {
  font-size: 1.3rem;
 }
}

@media screen and (max-width: 557px) {

 /*---NAV---*/

 nav li {
  display: none;
 }

 .ham-nav {
  width: 100vw;
  background-color: white;
  height: 375px;
  position: fixed;
  top: -388px;
  z-index: 2;
  transition: all .5s ease;
 }


 .ham-nav a {
  display: block;
  font-size: 2rem;
  color: red;
  text-decoration-line: none;
  font-family: 'Rajdhani';
  text-align: center;
  margin: 15px;
  position: relative;
  top: 60px;
  transition: all 5s ease;
 }

 .ham-menu {
  width: 55px;
  height: 55px;
  position: fixed;
  right: 0;
  top: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }

 .m1, .m2, .m3 {
  border-radius: 4px;
  margin: 4px;
  width: 35px;
  height: 3px;
  background-color: red;
  float: left;
  position: relative;
  transition:all .3s ease;
  opacity:1;
 }

 .hamburger-open .m1{transform: rotate(45deg) translate(4px, 12px);}
 .hamburger-open .m2{opacity:0}
 .hamburger-open .m3{transform: rotate(-45deg) translate(3px, -12px);}
 .hamburger-open {box-shadow: none;}
 .hamburger-open + div{top:0;}
}

@media screen and (max-width: 518px) {

 /*---NAV---*/

 nav li {
  font-size: 1.1rem;
 }

 /*---MAIN---*/

 header h1 {
  font-size: 3rem;
 }

 /*---FOOTER---*/

 .footer .wrapper {
  display: flex;
  flex-direction: column;
 }

 .footer div {
  margin: 0;
 }

 .footer h1 {
  font-size: 2rem;
  margin-top: 10px;
 }

 .footer .inner {
  margin: 0;
 }

 .footer .inner:before {
  display: inline-block;
  content: '';
  width: 100%;
  height: 2px;
  background-color: rgba(102,102,102, 0.6);
  position: absolute;
  margin-top: 48px;
 }

 .footer h1 span:after {
   content: '';
   height: 2px;
   width: 100%;
   background-color: red;
   position: absolute;
   bottom: 1px;
   left: 0;
 }

 .social form {
  margin: 0;
  display: flex;
  justify-content: center;
 }

 .social .inner {
  position: relative;
  top: -10px;
 }

 .social .inner:before {
  width: 100vw;
 }

 .contact .inner {
  margin-bottom: 20px;
 }

 .links a {
  margin-left: 5px;
 }

 .social h1 {
  margin-bottom: 10px;
 }

 .footer button {
  top: -38px;
  right: 1%;
  font-size: 1.2rem;
 }

 .social i {
  font-size: 1.8rem;
  margin-right: 2px;
  position: relative;
  top: -5px;
  left: 5px;
  color: rgba(102,102,102, 0.7);
  transition: all 0.4s ease;
 }

 .footer-textarea {
  width: 98%;
 }

 .footer .contact p {
  margin: 5px;
  font-size: 1rem;
 }

 .copyright {
  background-color: red;
 }

 .copyright span {
  color: white;
  background-color: red;
  padding: 5px;
  display: inline-block;
 }

}

/*---MOBILE---*/

@media screen and (max-width: 490px) {
 .stats {
  flex-direction: column;
 }

 .stat-num, .stat-info {
  font-size: 2rem;
 }
}

@media screen and (max-width: 425px) {

 /*---MAIN---*/

 .phrase {
  top: 179px;
 }

 .phrase p {
  font-size: 2.5rem;
  margin-bottom: 10px;
 }

 .phrase a {
  font-size: 1.3rem;
  padding: 7px;
 }

 .phrase .fas {
  margin-top: 10px;
  font-size: 2.5rem;
 }

 .stats p {
  font-size: 1.7rem;
 }

 .stats div {
  padding-bottom: 10px;
 }

 .stats div:before {
  height: 20px;
 }

 .promise h1 {
  font-size: 2.7rem;
 }

 .promise p {
  position: relative;
  top: 10px;
  font-size: 1.22rem;
 }
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Kane Concrete & Construction LLC</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
 <div class="inner-wrap">
  <header>
   <nav>
    <div class="logo">
     <img src="logo.jpg" class="logo" alt="logo">
    </div>

    <div class="nav">
     <div class="ham-menu">
      <div class="m1" id="m1"></div>
      <div class="m2" id="m2"></div>
      <div class="m3" id="m3"></div>
     </div>
     <ul>
      <li class="after"><a href="index.html">Home</a></li>
      <li class="after"><a href="about.html">About</a></li>
      <li class="after"><a href="about.html#services">Services</a></li>
      <li class="after"><a href="careers.html">Careers</a></li>
      <li><a href="contact.html">Contact</a></li>
     </ul>
    </div>
   </nav>
   <div class="ham-nav">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="about.html#services">Services</a>
    <a href="careers.html">Careers</a>
    <a href="contact.html">Contact</a>
   </div>
   
   <div class="phrase">
    <p>It all starts at the foundation.</p>
    <a href="contact.html#quote">Get a Quote</a>
    <i class="fas fa-angle-down"></i>
   </div> 
  </header>

  <section class="stats">
   <div id="start-year">
    <p class="stat-info">Established</p><br>
    <p class="stat-num">2015</p>
   </div>

   <div id="projects">
    <p class="stat-info">Projects</p><br>
    <p class="stat-num">200+</p>
   </div>

   <div id="claims">
    <p class="stat-info">Insurance claims</p><br>
    <p class="stat-num">87%</p>
   </div>
  </section>

  <section class="promise">
   <div class="wrapper">
    <h1>Our Promise</h1>

    <p><span style="color: red;">W</span>e believe that Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum doloremque impedit laudantium magnam eos quae ipsum, rem, dolorum saepe laboriosam ipsam nobis architecto debitis, vel aut provident tenetur perferendis, aliquid commodi magni sequi hic quia nemo! Nam odio fugiat, similique eum saepe. Laboriosam officiis delectus reiciendis, est tenetur voluptates ducimus! Ducimus enim dolor, eos id porro, amet culpa alias sunt reprehenderit necessitatibus deserunt eum. Sunt quia accusamus facilis quo, cum maiores nam illum sit quisquam, tempora fugit? Quod voluptate debitis voluptatum illo. Est, rerum sequi. Corporis atque incidunt placeat aliquam error veniam quis, minus voluptatem, qui, a pariatur voluptatibus, ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe labore aliquid magnam velit, nisi consequuntur!</p>
   </div>
  </section>
 </div>

 <section class="footer">
  <div class="wrapper">
   <div class="links">
    <div class="inner">
     <h1><span>Quick Links</span></h1>

     <a href="index.html">Home</a>
     <a href="about.html">About</a>
     <a href="about.html#services">Services</a>
     <a href="careers.html">Careers</a>
     <a href="contact.html">Contact</a>
     <a href="contact.html#quote">Quote</a>
    </div>
   </div>

   <div class="social">
    <div class="inner">
     <h1><span>Social</span></h1>

     <i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
     <i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
     <i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>

     <form action="https://formspree.io/seth.pabst@gmail.com" method="POST" id="form">
      <button name="msg" type="submit">Send</button>
      <textarea name="msg" class="footer-textarea" cols="46" rows="5" placeholder="Send is some feedback..."></textarea>
     </form>
    </div>
   </div>

   <div class="contact">
    <div class="inner" class="wrap">
     <h1><span>Contact</span></h1>

     <p>(208)546-7827 - <span class="dark">Matt</span></p>
     <p>(208)546-7827 - <span class="dark">Keegan</span></p>
     <p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
     <p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
    </div>
   </div>
  </div>
  
  <div class="copyright"><span>&copy; 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
 </section>
 <script src="script.js"></script>
</body>
</html>