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:
<!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>