Deltaelectronics
unread,Mar 28, 2014, 7:27:40 AM3/28/14You do not have permission to delete messages in this group
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
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