How to use z-index and layer 2 images on each other?

[n_merciano]

Hi,

I am stuck… i don’t know how to create this… it’s pretty complicated i guess.

I have 2 PNG pictures one iPad and one iMac i am trying to place them on each other and in the display i need to add another layer to show a scrolling website.

I am using Bootstrap 3.

These are the pictures:
s14.postimg.org/vwz6nrlsh/i_Mac.png

s4.postimg.org/v56ocjy7h/i_Phone.png

This is what i want to accomplish:
s14.postimg.org/sen6rdkwh/Screen_Shot_2015_03_07_at_00_33_32.png

Can somebody please help me?

[RyanReese]

Do you have an attempt at this we can help you with ?

[n_merciano]

http://sandbox.shokuninserver.com/~shefilm/orangeworx/

Yes i have managed to fix it, however i am facing a problem now. When i SCROLL DOWN the image in the iPad JUMPS TOO much down and then scrolls normal… i have looked into the JQUery plugin… tried adjusting but didn’t manage to solve this problem… it should smooth scroll any day and scroll from top down while scrolling the website.

The JQuery:

 // Parallax Devices Scrolling
  var $desktopScreenshot = $('.desktop-screenshot');
  var $mobileScreenshot = $('.mobile-screenshot');
  var windowScroll;

  function parallaxBrowsers() {
    windowScroll = $(this).scrollTop();
    $desktopScreenshot.css({
      'background-position' : 'center ' + (-windowScroll/5)+"px"
    });
    $mobileScreenshot.css({
      'background-position' : 'center ' + (-windowScroll/10)+"px"
    });
  }

  if (!Modernizr.touch) {
    /* Triggers the Parallax Devices Scrolling */
    $(window).scroll(function() {
      parallaxBrowsers();
    });
  };

I have tried TOP but it stops working…

Can you help me to solve this last bug?

Thanks!