Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss

Gestione dello scrolling

0 views
Skip to first unread message

Deltaelectronics

unread,
Mar 28, 2014, 7:27:40 AM3/28/14
to
Salve a tutti:
Consideriamo il seguente codice HTML:

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pippo</title>
<link type="text/css" href="Styles/style.css" rel="stylesheet">
</head>

<body>
<div class="wrapper">
<div class="header">
<div class="telo"></div>
<div class="link">
<a href="home.html ">
<img src="Images/play.png"/>
</a></div>
</div>
<footer>
<div class="nome">Pluto </div>
<div class="nome2">Paperino</div>
</footer>
</div> <!-- wrapper -->

</body></html>

dove il file style.css è il seguente:

body,html {
background: ##596a72;


/* IE10 Consumer Preview */
background-image: -ms-radial-gradient(center, ellipse closest-side,
#FFFFFF 0%, #000000 100%);

/* Mozilla Firefox */
background-image: -moz-radial-gradient(center, ellipse closest-side,
#FFFFFF 0%, #000000 100%);

/* Opera */
background-image: -o-radial-gradient(center, ellipse closest-side,
#FFFFFF 0%, #000000 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(radial, center center, 0, center
center, 140, color-stop(0, #FFFFFF), color-stop(1, #000000));

/* Webkit (Chrome 11+) */
background-image: -webkit-radial-gradient(center, ellipse closest-side,
#FFFFFF 0%, #000000 100%);

/* W3C Markup, IE10 Release Preview */
background-image: radial-gradient(ellipse closest-side at center,
#FFFFFF 0%, #000000 100%);
}

wrapper {
width:89em;
height: 64.5em;
margin-left: auto;
margin-right: auto;
background: url(../images/Sfondo-Intro.jpg) no-repeat center center
fixed;
color: #fff;
font-size: 10pt;
}

telo{
background-image: url("../images/telo.png");
width: 65em;
height: 40em;
margin-left: 11em;
margin-top: 4em;
float: left;
}

link{
margin-left: 41em;
margin-top: -21em;
float: left;
}

nome {
margin-top: 5.2em;
margin-left:2.3em;
font-family: "Times New Roman";
font-size: 2.7em;
float: left;
}

nome2 {
margin-top: 11.5em;
margin-left: 0.5em;
font-family: "Verdana";
font-size: 1.3em;
float: left;
}

Tutto è OK fino al momento in cui non ridimensiono la pagina; in altre
parole vorrei fare in modo che l'immagine "telo.png", impostata come
bakcground del <div class="telo"> si muova, al ridimensionamento della
finistra del browser, assieme all'immagine "Sfondo-intro.png" impostata
come background di wrapper.
Ho provato in diversi modi, ad esempio impostare "Sfondo-intro.png" come
background di body.html, ma proprio non sono riuscito a cavare il
classico ragno dal buco; le due immagini di background si muovano assieme.
Grazie mille per l'aiuto.
DeltaElectronics

0 new messages