Lez.17 - Corso Intermedio Css

IMMAGINI di SFONDO e la POSIZIONE

Le Immagini di Sfondo e la loro Posizione

Per impostazione predefinita l'immagine è posizionata in alto e a sinistra del suo contenitore.

Per collocare l'immagine nel posto in cui vogliamo del suo contenitore, usiamo la proprietà:
background-position: valore orizontale valore verticale;

es: background-position: center right; in questo caso all'immagine diamo la posiziona al centro e a destra del suo contenitore.

I valori possono essere espressi anche in percentuali:
background-position: 50% 100%; 50% in orizzontale vuol dire che posizioniamo l'immagine al centro del suo contenitore, e il 100% in verticale quindi poggiata sul lato più in basso.
I valori possono essere espressi anche in unità di misura fisse come i pixel:
background-position: 30px 30px; l'immagine si posizionerà a 30px in orizzontale partendo dal lato sinistro e a 30px in verticale partendo dal lato superiore.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Immagine di sfondo la Posizione</title>
  <meta charset="utf-8">
  <style type="text/css">
	div {
		background-color: cyan;
		width: 400px;
		height: 400px;
		background-image: url(percorso_immagine);
		background-repeat: no-repeat;
		background-position: center right;
	}
  </style>
 </head>
 <body>			    
 	<h1>Immagine di sfondo la Posizione</h1>
	<div>
		Contenuto del div
	</div>
 </body>               
</html>