Forums

dako

greetings, I'm new to this site, hope someone can give me some ideas...

I'm doing a spx header (multiple scrolling background images) for my website, crimegameonline.com where the home page is doing what I want (though I might try to do a trail effect). Problem comes if you go to crimegameonline.com/mobster-game-p2i.php (via sidebar on home page, Mobster)...

Right now, its two of the same background images scrolling at different speeds...
css:

#scrollerAll {
position: relative;
height: 70px;
background-image:url('../bitmaps/scrolls/chemLayer2c.png');
background-repeat: repeat-x;
}

#rollerTwo {
position: relative;
height: 70px;  /* changin wont matter cuz this inner layer */
background-image:url('../bitmaps/scrolls/chemLayer2c.png');
background-repeat: repeat-x;
}

js:

function MoveBackGround () {
  window.cssXPos++;
  if (window.cssXPos>=window.cssMaxWidth) {
    window.cssXPos=0;
  }
  toMove=document.getElementById("scrollerAll");
  toMove.style.backgroundPosition=window.cssXPos+"px 0px";  
}

function MoveBackGround2 () {
  window.cssXPos2++;
  if (window.cssXPos2>=window.cssMaxWidth) {
    window.cssXPos2=0;
  }
  toMove=document.getElementById("rollerTwo");
  toMove.style.backgroundPosition=window.cssXPos2+"px 0px";  
}

function StartMove() {
  window.cssMaxWidth=800;
  window.cssXPos=0;
  window.cssXPos2=0;
  setInterval("MoveBackGround()",70);   
  setInterval("MoveBackGround2()",30);
}

html:

<body  onload="StartMove()">
<div id="wrap"><div id="scrollerAll">
<div id="rollerTwo"></div>
</div>

okay, no problem. It works. Note it is using the same image, which is what I want for performance.

BUT what I want is for the slower one to be like how you see a 200% image. So the fast is moving over (the top 1/2) of a 200% image. I could photoshop myself a second image and save it zoomed up, but that is lame, I have a good image right there in memory!

Any ideas? I'd rather not use Jquery.

dako

whoops, dunno what happened to the html:
(body onload="StartMove()")
(div id="scrollerAll")
(div id="rollerTwo")(/div)(/div)
(using () instead of brackets, maybe for no like)

TheDoc

Sorry, maybe I'm not understanding... why don't you just do this to one of them:

background-size: 200%;

dako

okay, I'm an idoit. That worked fine, thank you!
Didn't know that existed.

treehouse : what would you like to learn today?

Forums

scrolling css background-image, want 140px depth in 70px area