HTML image not responsive on mobile

I am trying to get my background image on mobile to be responsive but i just can't.. ( the budha picture)

website: www.cualirevolut.com

style.css

body {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
color: #333333;
font-family: 'Raleway',sans-serif;
font-size: 14px;
line-height: 26px;
background: url(../images/intro1.jpg) no-repeat center center fixed;
-webkit-background-size: 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/*overflow: hidden;*/
overflow: visible;
-webkit-overflow-scrolling: touch;
/*box-sizing: content-box;*/
/*overflow:visible;*/

-webkit-font-smoothing: antialiased;

index.html

<section id="home">
  <div class="overlay">
     <div class="background">
        <div class="home-wrap text-center" data-animated="bounceIn">
           <h1>Quando foi sua última experiência?</h1>
           <p>Revolucionando a interação das pessoas através de experiências únicas</p>
              <a href="#Features" class="btn btn-intro btn-lg scrol"> <span class="">Descubra mais</span></a>
              <!--<a href="#Pricing" class="btn btn-home btn-lg scrol"> <span class=""></span></a> -->
        </div>
     </div>
  </div>

Many thanks in advance,

Marcelo.