[CSS+JS] background image w odpowiednim miejscu

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>parallaX - Interactive DHTML art-demos</title> 

<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 

<meta http-equiv="imagetoolbar" content="no"> 

<style type="text/css"> 

    html {

        overflow: hidden;

    }

    body {

        margin: 0px;

        padding: 0px;

        background: #000;

        width: 100%;

        height: 100%;

    }

    #screen {

        position: absolute;

        left: 50%;

        top: 50%;

        width: 600px;

        height: 400px;

        margin-left: -300px;

        margin-top: -200px;

        overflow: hidden;

        background: #000;

        outline: #FFF solid 50px;

    }

    #screen img {

        position: absolute;

        left: -2000px;

    }

</style> 

 

<script type="text/javascript"> 

// ===============================================================

//            -------- parallax 3D scrolling ------

// script written by Gerard Ferrandez - Ge-1-doot - December 2005

// http://www.dhteumeuleu.com

// thanks to UncageArtist for the idea :)

// ===============================================================

 

var cx=0;

var cy=0;

var xm=0;

var ym=0;

var scr;

var img;

 

function parallax(rx, ry){

    var pos = function(i, x, y) {

        img[i].style.left = Math.round(x) + "px";

        img[i].style.top  = Math.round(y) + "px";

    }

    pos(0,-20+(rx/2),-80+(ry*2)); 

    pos(1,140+(rx/2),70+(ry/2)); 

    pos(2,160+(rx/3),100+(ry/3)); 

    pos(3,180-(rx/2),130-(ry/2)); 

    pos(4,200-rx,160-ry);

    pos(5,240-rx*2,190-ry*2);

}

 

function mainloop(){

    cx+=Math.round((xm-cx)/10);

    cy+=Math.round((ym-cy)/10);

    parallax(

        -((scr.offsetWidth/2)-cx)/7,

        -((scr.offsetHeight/2)-cy)/4.75

    );

    setTimeout(mainloop, 16);

}

 

onload = function(){

    scr = document.getElementById("screen");

    img = scr.getElementsByTagName("img");

    parallax(0,0);

    scr.onmousemove = function(e){

        if (window.event) e = window.event;

        xm = -scr.offsetLeft + (e.x || e.clientX);

        ym = -scr.offsetTop + (e.y || e.clientY);

    }

    mainloop();

}

 

</script> 

</head> 

 

<body> 

    <div id="screen"> 

        <img src="images/images.jpg"> 

        <img src="images/5.png"> 

        <img src="images/1.png"> 

        <img src="images/2.png"> 

        <img src="images/4.png"> 

        <img src="images/3.png"> 

    </div> 

</body> 

 

</html>

Kod:

        <img src="images/images.jpg">

        <img src="images/5.png">

        <a href="http://tem.com.pl/index.php/oferta/puszki"><img src="images/1.png">

        <a href="http://tem.com.pl/index.php/oferta/ramki"><img src="images/2.png">

        <a href="http://tem.com.pl/index.php/oferta/modul/elementy"><img src="images/4.png">

        <a href="http://tem.com.pl/index.php/oferta/modul"><img src="images/3.png">