Lez.18 - Corso Intermedio Css
IMMAGINI di SFONDO, e lo SCROLLING
Immagini di Sfondo e lo Scrolling
Lo scrolling è l'operazione per la quale la pagina viene fatta scorrere in verticale per poter vedere tutto il suo contenuto.
Se l'immagine è fissata allo sfondo e noi voglimao che segua il flusso della pagina ci viene in aiuto la proprietà: attachment (attaccamento)
background-attachment: scroll; con il valore scroll (scorrere) valore di defoult, l'immagine scorre insieme alla pagina come se rimanesse attaccata al suo contenuto.
background-attachment: fixed; con fixed (fisso) l'immagine rimane fissata alla schermata, tutto il resto scorre mentre l'immagine rimane ferma lì.
background-attachment: local; con il valore local (locale) la proprietà fa si che quando scrolla la pagina scrolla tutto quello che contiene, perciò quando vado a scorrere l'inter div l'immagine segue lo scorrimento quindi scrolla anche l'immagine nel div.
Per fare un riepilogo con:
- scroll l'immagine scorre insieme alla pagina ma rimane ferma dentro il div dove è contenuta
- fixed l'immagine rimane ferma al suo posto in ogni caso
- local scorre sia quando scorro la pagina sia quando scorro il div che la contiene.
Il Codice:
Se l'immagine è fissata allo sfondo e noi voglimao che segua il flusso della pagina ci viene in aiuto la proprietà: attachment (attaccamento)
background-attachment: scroll; con il valore scroll (scorrere) valore di defoult, l'immagine scorre insieme alla pagina come se rimanesse attaccata al suo contenuto.
background-attachment: fixed; con fixed (fisso) l'immagine rimane fissata alla schermata, tutto il resto scorre mentre l'immagine rimane ferma lì.
background-attachment: local; con il valore local (locale) la proprietà fa si che quando scrolla la pagina scrolla tutto quello che contiene, perciò quando vado a scorrere l'inter div l'immagine segue lo scorrimento quindi scrolla anche l'immagine nel div.
- scroll l'immagine scorre insieme alla pagina ma rimane ferma dentro il div dove è contenuta
- fixed l'immagine rimane ferma al suo posto in ogni caso
- local scorre sia quando scorro la pagina sia quando scorro il div che la contiene.
Il Codice:
<!DOCTYPE html>
<html lang="it">
<head>
<title>Immagine di sfondo lo Scrolling</title>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: aqua;
width: 300px;
height: 200px;
overflow: auto;
background-image: url(percorso_immagine);
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<h1>Immagine di sfondo lo Scrolling</h1>
<div>
<p>Paragrago 1</p>
<p>Paragrago 2</p>
<p>Paragrago 3</p>
<p>Paragrago 4</p>
<p>Paragrago 5</p>
<p>Paragrago 6</p>
<p>Paragrago 7</p>
<p>Paragrago 8</p>
<p>Paragrago 9</p>
<p>Paragrago 10</p>
<p>Paragrago 11</p>
<p>Paragrago 12</p>
<p>Paragrago 13</p>
<p>Paragrago 14</p>
<p>Paragrago 15</p>
<p>Paragrago 16</p>
<p>Paragrago 17</p>
<p>Paragrago 18</p>
<p>Paragrago 19</p>
<p>Paragrago 20</p>
</div>
<p>Paragrago 21</p>
<p>Paragrago 22</p>
<p>Paragrago 23</p>
<p>Paragrago 24</p>
<p>Paragrago 25</p>
<p>Paragrago 26</p>
<p>Paragrago 27</p>
<p>Paragrago 28</p>
<p>Paragrago 29</p>
<p>Paragrago 30</p>
<p>Paragrago 31</p>
</body>
</html>