Per fare si può fare, usando qualche trucchetto 
Questo è un'esempio con immagine semplicemente suddivisa in due.
Per l'immagine abbiate pietà, ho preso la prima trovata con google.
Codice PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>doppio sfondo</title>
</head>
<style>
* div {
position: relative;
margin: 0;
padding: 0;
border: 0;
}
body{
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
background: black;
}
#backImage, #page{
width: 800px;
margin: 0 auto;
z-index: 1;
}
#backLeft, #backRight{
margin: 0;
padding: 0;
border: 0;
background:transparent url('http://doppiavu.files.wordpress.com/2008/03/sfondo1.jpg') 0 0 no-repeat;
width: 400px;
overflow: hidden;
height: 100%;
position: fixed;
}
#backLeft:hover{
border: 3px solid red;
margin: -3px;
}
#backRight:hover{
border: 3px solid green;
margin: -3px;
margin-left: 397px;
z-index: 2;
}
#backRight{
background:transparent url('http://doppiavu.files.wordpress.com/2008/03/sfondo1.jpg') -400px 0 no-repeat;
margin-left: 400px;
}
#divClear{
clear: both;
}
#page {
background: #eee;
border-radius: 15px;
padding: 15px;
width: 700px;
top: 50px;
z-index: 3;
}
</style>
<body>
<div id="backImage">
<div id="backRight"></div>
<div id="backLeft"></div>
<div id="divClear"></div>
</div>
<div id="page">
Esempio con immagine di sfondo suddivisa in due parti.</p>
Effetto border on hover sulle immagini per "notare" la suddivisione</p>
</div>
</body>
</html>
Metti in un file e salva come html.
Il trucchetto è quello di gestire il DIV come una parte dell'immagine... penso che il codice parli da se. Dipende, ovviamente da quanto complessa la si voglia fare. Per far questo ci ho messo 2 minuti, è veramente semplice, tuttavia attravesto php e js il tutto può "facilmente" essere reso dinamico. Io ad esempio ho impostato le dimensioni fisse, dato che sono partito con un'immagine da 800px di larghezza, però attraverso php o js si può automatizzare di modo da adattarlo a qualunque immagine.
Permessi di invio
Rispondi quotando