Pattern overlay for parallax

Hi @all,

Is there a chance to place an overlay pattern to the parallax images? I found a post regarding this... but, without a solution
Right now (for this demo) I use customized sample images, but I really want to use original images without preediting them first. You can take a look at it here: http://bit.ly/1EmALNu

Do I have to change/add a few lines of css only or do I have to add an additional div-tag before the parallax-bg-layer?

Thanks and best regards

Hi
I think You've already added it:

Code: Select all

<div class="headerPattern"></div>


now You just need a css with this pattern attached:

Code: Select all

.headerPattern {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 1000;
background-image: url('URL_TO_PATTERN_IMAGE');
}


THX!

I created two classes: headerPattern and parallaxPattern, because: modules in header and e.g. bottom1 module position show a different behavior. If you want to show the text bright and shiny in front of the pattern, you have to notice: inside the header module position you have to move the pattern up a little bit (means: z-index: 1). Inside all other positions (where you're going to use the 'parallax-bg' moduleclass-suffix), the pattern has to be set to z-index: -1. To escape further miss-overlays, I also added z-index: 3 to gkPage class.

headerPattern: for parallax-effect inside the modules in header-position
parallaxPattern: for parallax-effect throu moduleclass-suffix 'parallax-bg' inside all other module positions

Code: Select all

.headerPattern,
.parallaxPattern {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   z-index: 1;
   background-image: url('URL_TO_PATTERN_IMAGE');
}
.parallaxPattern {
   z-index: -1;
}
.gkPage {
   z-index: 3;
}

And voi­là, it works like it should! Thanks @Teitbyte for your support!