HTML Logo by World Wide Web Consortium ( Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.

Parallax Background Effect

Login / Search

 [ Join | More ]
 Add topic 
#35543 (In Topic #8020)

Community saint

Well a few days ago I found a java script that adds a very nice looking effect using two backgound images, I brough it up to chris and he was kind enough to help me implement it onto my site and it works but I'm having some issues and I dont want to keep bothering chris so I figured that I would see if some of you other guru's on here would be able to help me out, I'm pretty sure I know why its doing what its doing but I'm not to sure how to remedy this problem.

Here is what I have changed with a lot of help from chris.



<body onload="Javascript: scriptLoadStuff()" id="ground" style="{$?,{$OR,{$EQ,{$ZONE},adminzone},{$EQ,{$ZONE},cms}},,width: 1024px; position: relative; margin: 0 auto 0 auto}"><div id="clouds">
  In FOOTER.tpl


<blockquote id="javascriptcode"></blockquote></div></body>
  In GLOBAL.css


#ground {
  background-image: url('{$BASE_URL}/uploads/website_specific/gbl_background.png');
  background-repeat: repeat;
  background-attachment: fixed;

#clouds {
  background-image: url('{$BASE_URL}/uploads/website_specific/clouds.png');
  background-repeat: repeat;
  background-attachment: fixed;

* html #clouds {
  /* because IE6 can't do transparent PNGs for backgrounds */
  background-image: url('{$BASE_URL}/uploads/website_specific/clouds.gif');

#javascriptcode {
   background-image: url('{$BASE_URL}/uploads/website_specific/gbl_background.png');
   background-repeat: repeat;
  In JAVASCRIPT.tpl I added


   var i;
  window.onscroll = function() {
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

    var ground = document.getElementById('ground');
    var groundparallax = calcParallax(53, 8, posY); = "0 " + groundparallax + "px";

    var clouds = document.getElementById('clouds');
    var cloudsparallax = calcParallax(400, .5, posY); = "0 " + cloudsparallax + "px";

  document.getElementById('javascriptcode').onscroll = function() {
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
    var j = calcParallax(53, 16, posX);
    console.log('scroll js: '+ j);
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  And all that controls the speed of a fixed background image. Working DEMO and Code Here

Now the problem that I'm having is I am using a fixed width site as you can see from my HEADER.tpl which seems to be causing the problem the gbl_background.png covers the whole page and thats what I want but when it renders the clouds.png it only renders it in the middle of the page and I can't for the life of me figure out how to fix this issue any help would be greatly appriciated.

If you would like to use this code on your site please give the creator his props by adding this to the end of your JAVASCRIPT.tpl


function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor
  //    originally published at
  //    usable under terms of CC-BY 3.0 licence
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));

 I'm not real big on building skins as of right now but if you would like some custom graphics done for your site I am more than willing as long as I have the time. -\-PhrozenStudios-/-
Back to the top
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: