Lez.16 - Corso Intermedio Css

- IMMAGINI di SFONDO
- La RIPETIZIONE delle IMMAGINI

Le Immagini di Sfondo

L'immagine di sfondo è l'immagine che con la proprietà:
background-image: url(percorso); noi inseriamo nel nostro contenitore.

Nell'esempio che faremo nel codice, il contenitore è il body.

Per imostazione predefinita l'immagine di sfondo viene ripetuta in orizzontale e in verticale finché riempie tutto il contenitore.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Immagini di Sfondo</title>
  <meta charset="utf-8">
  <style type="text/css">
	body {
		background-image: url(percorso_immagine.jpg);
	}
	div {
		background-color: cyan;
		width: 200px;
		height: 200px;
	}
  </style>
 </head>
 <body>			    
 	<h1>Immagini di Sfondo</h1>
	<div>
		Contenuto del div
	</div>
 </body>               
</html>                    

La RIPETIZIONE delle IMMAGINI

La proprietà che è in grado di modificare la riperizione di un immagine usata come sfondo è:
background-repeat: valore;

I valori che può assumere sono:
repeat (ripetere) l'immagine viene ripetuta in orizzontale e in verticale, questo valore è di defoult.

no-repeat questo valore serve per forzare l'immagine a non essere ripetuta.

repeat-x ripeti l'immagine soltanto sull'asse X cioè soltanto in maniera orizzontale.

repeat-y ripeti l'immagine soltanto sull'asse Y cioè soltanto in maniera verticale.
Tutto questo serve per capire che un'immagine di sfondo ha un certo peso, e questo peso influisce negativamente sul caricamento della pagina.

Ora, se noi riducessimo l'immagine (che può essere uno sfondo a tinta unita o sfumato o ancora una texture), se tale immagine la riduciamo ad 1px e quindi molto molto leggera, e poi la ripetessimo su un asse fino a riempire il suo contenitore, ridurremmo il suo peso di moltissimo, guadagnado molto in velocità di caricamento della pagina web, e questo sarebbe un bel risultato.

Il codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Immagine di sfondo la Ripetizione</title>
  <meta charset="utf-8">
  <style type="text/css">
     div {
	     background-color: cyan;
	     width: 400px;
	     height: 400px;
	     background-image: url(percorso_immagine_ridotta_1px.jpg);
	     background-repeat: repeat-x;
     }
  </style>
 </head>
 <body>			    
    <h1>Immagine di sfondo la Ripetizione</h1>
    <div>
	    Contenuto del div
    </div>
 </body>               
</html>