Parallax issue

Hello,

I'm using the parallax, but I experience some issue when I change the size of the browser, the vertical position mess up.
Could you let me know if I can fix the position in pixel instead of percentage. My website is currently offline, let me know how to give you access to see what's going on

Again thanks for your help

Hi

Please send an access to my mail or via PM.

Hello,

the information is in my outbox.

Thanks

Hi

Are You reffering to mobile view ? A paralax is disabled there since it's extremly hard to make it work the same if area is squeezed to mobile width, so we have replaced paralax there to an ordinary image loaded for this view only. A class loading the image looks like this:

Code: Select all

gkHeaderTop .gkp-tablet {
    background: url("../images/responsive/parallax_tablet_top.jpg") no-repeat scroll center 0 transparent !important;
    height: 529px !important;
    text-indent: -9999px;
}


Hello Thanks for for answer.
I was not necessarily referring to tablet, I'm using 2 different macs to do the website as well as different browser to make sure it works properly. So between my imac 27in and macpro with a smaller screen the image of the parallax at the bottom are not at the same place. So I do not understand why since I have a defined height for the bottom, so the size of the screen should not have any impact.
I hope it make sense, if not I will attach print screen

Thanks

Nicolas

Hi

Yes please show me a screenshot. Also please check validation of the site. if something is messed in bottom part it may be a wrong html's fault.

Hello

please find below the html code and overide.css

Code: Select all

.loaded.gkp-background-bottom {
  background: transparent url('../images/pc/titles_pc.png') repeat center 0!important;
}

/*image parallax  */


.gkp-toque1 {
  background: transparent url('../images/parallax/toque1.png') no-repeat 0 0 ;
  height: 101px;
  width: 99px;
}

.gkp-herbe {
  background: transparent url('../images/parallax/herbe.png') repeat 0 0;
  height: 242px;
  width: 2014px;
}


.gkp-filleTop {
  background: transparent url('../images/parallax/fillesTop.png') repeat 0 0;
  height: 360px;
  width: 220px;
}

.gkp-lampe {
  background: transparent url('../images/parallax/lampe.png') no-repeat 0 0;
  height: 545px;
  width: 128px;
}

.gkp-table {
  background: transparent url('../images/parallax/table.png') no-repeat 0 0;
  height: 325px;
  width: 659px;
}

.gkp-casserole {
  background: transparent url('../images/parallax/casserole.png') no-repeat 0 0;
  height: 45px;
  width: 98px;
}

.gkp-fleur1 {
  background: transparent url('../images/parallax/fleur_1.png') no-repeat 0 0;
  height: 87px;
  width: 60px;
}

.gkp-fleur2 {
  background: transparent url('../images/parallax/fleur_2.png') no-repeat 0 0;
  height: 81px;
  width: 40px;
}

.gkp-fleur3 {
  background: transparent url('../images/parallax/fleur_3.png') no-repeat 0 0;
  height: 65px;
  width: 60px;
}

.gkp-fleur4 {
  background: transparent url('../images/parallax/fleur_4.png') no-repeat 0 0;
  height: 60px;
  width: 59px;
}


Code: Select all

<div class="gk-parallax gkp-background-bottom" data-area="700" data-height="509">
   <div class="gk-parallax-wrap">
      <div class="gkp-element gkp-herbe" data-start="50%,86%" data-end="50%,86%">Herbe</div>
      <div class="gkp-element gkp-lampe" data-start="70%,-54%" data-end="70%,-32%">Lampe</div>
      <div class="gkp-element gkp-filleTop" data-start="50%,58%" data-end="50%,58%">Fille top</div>
      <div class="gkp-element gkp-toque1" data-start="54%,-30%" data-end="54%,23%">Toque1</div>
      <div class="gkp-element gkp-fleur2" data-start="75%,0%" data-end="75%,87%">Fleur2</div>
      <div class="gkp-element gkp-table" data-start="55%,75%" data-end="55%,75%">table</div>
      <div class="gkp-element gkp-casserole" data-start="35%,-10%" data-end="35%,61%">Casserole</div>
      <div class="gkp-element gkp-fleur1" data-start="15%,-40%" data-end="15%,90%">Fleur2</div>
      <div class="gkp-element gkp-fleur3" data-start="90%,30%" data-end="90%,73%">Fleur3</div>
      <div class="gkp-element gkp-fleur4" data-start="0%,0%" data-end="0%,70%">Fleur4</div>
      <div class="gkp-tablet">Tablet view</div>
      <div class="gkp-mobile">Mobile view</div>
   </div>
</div>

As far as "check validation of the site" , i'm not sure what you are referring to, I'm using JCE which checks the html code ( show error thanks to color codes)
The issue is maybe due to the bottom background image which is a composed with repeated images.

Thanks for your help

Hi

I cannot figure it out with just parts of the code, but please lets check the validation theory first. It doesn;t have to come up in the part You have shown me. A validation error can be hidden in any part of the code and impact on any code below it. The easiest thing to check it is by disabling articles/modules and checking when errors will dissapear. Have You made any changes to the template files ? It can be the problem too.

HI,

I will try to proceed as you said. I did not modify the template, all my modification are usually made in override file. I disabled the header_bottom module in order to launch my website, I will work on a mirrored website to try to find the issue.

Thanks

Hi

Try unpublish content, than modules. Watch how bottom acts. If You will see it ok that will be a sign that the error is in the last unpublished element.