Search code examples
jqueryhtmlioscssparallax

Can't get linear-background working on mobile devices

I'm using a parallax background with a linear gradient to make the image little more darker. I could get it working nice on desktop computers, but when I try it on mobile devices(iPhone)the gradient does not work, and inspecting the element, I can see that the background property is there.

<div class="fundo" id="planos" data-parallax="scroll" data-position-y="-100px" data-image-src="images/slider/1_dark.jpg">
<div class="mid-content">
         <div class="white banner-hospedagem">blah blah
          </br><span>Teste</span>
         </div>
         <h3 class="white subbanner-hospedagem">Teste 2</h3>
         <hr class="style-two" />
 </div>
 </div>

css

.fundo{
   background: -moz-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -webkit-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -webkit-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -o-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: -ms-linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   background: linear-gradient(rgba(0, 0, 0, 0.521569), rgba(0, 0, 0, 0.521569)) center -148px;
   width: 100%;
   margin:0;
   padding-bottom: 70px;
}

Any ideas why its not working?

I'm using jquery parallax http://pixelcog.github.io/parallax.js/

Thanks

Solution

  • got it working... just used another div instead of applying the gradient effect on the same parallax block.

    <div id="planos"  data-parallax="scroll" data-position-y="-20px" data-image-src="images/back_3.jpg">
  <div class="fundo">
    <div class="mid-content">
       <div class="white banner-dominio"> Comece a dar vida </br> registrando  <span>blah</span>.

       </div>

       <h3 class="white subbanner-dominio"> <span><small>R$</small>sdasd</span> .com.br   <span>   <small>R$</small>asd</span> .com  </h3>

        </div>
    </div>
 </div>