animazione background con immagini sovrapposte

**leaf** · 04-02-2015, 05:40

ciao, ho questo codice. funziona alla grande ma mi sto scontrando con questi 2 ostacoli:

1) non riesco a capire come fare per evitare che zoomando si rimpicciolisca tutto (intendo tutte e 3 le immagini). infatti non voglio che questo accada.

2) non ho la più pallida idea di come integrare questo codice nelle altre pagine senza dover copiare tutto il codice in ogni pagina. Inoltre, facendo una prova veloce (copiando questo codice in una pagina con un form), il posizionamento del form è completamente sballato (pensavo che clear:both servisse proprio ad evitare questo).

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titolo</title>
<style type="text/css">
@keyframes animatedBackground {
    from { background-position: 0 0; }
    to { background-position: 100% 0; }
}
#mid{ 
    width: 1960px; 
    height: 1000px; 
    background-image: url(css/img/cl_at.png);
    background-position: 0px 0px;
    background-repeat: repeat-x;
    z-index: -9999;
    animation: animatedBackground 40s linear infinite;
}

body {
    background-color: #666666;    
    margin: 0;
    height: 1000px;
    width: 1650px;
    overflow: hidden;
}
#imL{
    background-image: url(css/img/at_vert_sx_small2.png);
    float: left;
    margin-top:-105px;
    height: 1200px;
    background-repeat:no-repeat;
    width: 600px;
    z-index: 9999;
}

#imR{
    background-image: url(css/img/anno2015_ata_small.jpg);
    float: right;
    margin-right:-300px;
    height: 1200px;
    margin-top:-1000px;
    background-repeat:no-repeat;
    width: 600px;
    z-index: 9999;
}

#clear {
    clear: both;
}
</style>
</head>
<body>
<div id="contenitore">
  <div id="imL">&nbsp;</div>
 <div id="mid">&nbsp;</div>
  <div id="imR">&nbsp;</div>
  <div id="clear">&nbsp;</div>
</div>
</body>
</html>

grazie,
L.

**leaf** · 04-02-2015, 07:23

edit: in pratica voglio ottenere questo: però al posto dello sfondo grigio ci sarà l'immagine animata. come vedete se in questa pagina zoomate, cambia solo la dimensione del form e non del background (che però è una immagine sola). aggiungo che sto facnedo delle prove settando background-contain (ma non è il risultato che voglio) e background-cover (che proprio fa tutt'altro).

**leaf** · 10-02-2015, 21:04

up!

**leaf** · 22-02-2015, 02:14

uup!

**leaf** · 30-03-2015, 02:20

nessuno?

Discussione: animazione background con immagini sovrapposte

Strumenti discussione

Ricerca discussione

Visualizza

animazione background con immagini sovrapposte

Permessi di invio