Float - ripresa
• Float left: dispone a pila tutti i div sulla sinistra
• Float right: dispone a pila tutti i div sulla destra
Posizionamento background
Background-position
• Per utilizzare una immagine come background di un DIV o di un altro tag (come
BODY o HTML) si utilizza la proprieta
Background-image: url(posizionedeldile)
Per posizionare un background invece si utilizza la proprietà backgroundposition che stabilisce come vengono posizionati gli sfondi con le parole chiavi
per la posizione:
div.box{background:
div.box{background:
div.box{background:
div.box{background:
*/
url(pic.png)
url(pic.png)
url(pic.png)
url(pic.png)
left top} /* in alto a sinistra
center} /* al centro */
bottom right} /* in basso a destra */
right center} /* in centro a destra
• Questo tipo di posizionamento si utilizza con immagini di background
di grandi dimensioni (ad esempio full HD) che pero potrebbero non
coprire tutta l’area visibile (se avessi un monitor piu grande di una
risoluzione full HD????)
• SOLUZIONE: usare un background che sfuma ai lati e riprendere il
colore dell’elemento con background-color.
• VEDI ESEMPIO 1
• È possibile posizionare gli sfondi utilizzando le unità di misura tipiche
per il dimensionamento di elementi e font: px, em, cm, in, mm per
citarne alcune, anche se in realtà pixel ed em dovrebbero essere
quelle da preferire.
• div.box{background: url(pic.png) 60px 120px} /*
in alto spostato di 120px e da sinistra
spostato di 60px
• Analogamente, valori negativi della x corrispondono a traslazioni dello
sfondo verso sinistra, mentre valori negativi della y corrispondono a
traslazioni verso l’alto.
• L’effetto è quindi quello di traslare l’immagine di sfondo, o una parte
di essa, all’esterno dell’elemento a cui è assegnata.
div.box{background: url(pic.png) -20px -20px}
Posizionamento background full screen
sfondo pagina con cover
• Con i CSS3 è possibile intervenire anche sulla dimensione dei
background. Questo non è possibile con i CSS 2.
• Tuttavia per i i vostri progetti potete utilizzare anche la proprietà CSS3
background-size che serve a impostare le dimensioni delle immagini
usate come sfondo su un elemento della pagina.
background-size: cover;
background-size: contain;
COVER
• Se si usa cover, l’immagine viene ridimensionata per coprire
interamente l’elemento a cui viene applicata; in questo processo
possono essere tagliate alcune parti dell’immagine per adattarla al
meglio all’elemento, alle sue dimensioni e al rapporto d’aspetto di
quest’ultimo, ma siamo certi che l’elemento stesso sarà sempre
coperto nella sua interezza.
• Ottima per background full screen
• ESEMPIO 2
CONTAIN
• Se si usa contain, invece, l’immagine viene ridimensionata per
adattarsi all’area dell’elemento cui viene applicata; mantiene sempre
il suo rapporto di aspetto, la visualizzeremo sempre nella sua
interezza, nessuna parte sarà tagliata, ma alcune aree dell’elemento
potrebbero risultare scoperte.
Ad esempio…per un bakcground full screen
adattivo
body {
background: url(‘bkg.jpg');
background-repeat: no-repeat;
background-position: 0 0;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
Posizionamento background full screen
sfondo pagina con texture
Background-repeat: repeat-x /* utilizzato per
ripetere una texture in orizzontale*/
Background-repeat: repeat-y /* utilizzato per
ripetere una texture in verticale*/
Background-repeat: no-repeat; /* utilizzato per
ripetere una sola volta una immagine, usato
spesso per DIV contenitore*/
html{
background: url(img/gradient.jpg) repeatx top;
background-color: #E6E6E6;
}
E’ solo questa immagine che viene ripetuta
lungo l’asse delle X per tutta la dimensione
della pagina.
La rimanenza è colorata tramite background
color
1) Si carica una sola immagine leggera
2) Non ci interessa sapere la dimensione del
monitor
Come prima, l’immagine viene ripetuta in verticale con repeat-y.
1) Si carica una sola immagine leggera
2) Utilizzata per DIV i contenuti in verticale (Height) no si conoscono a
priori ma possono variare. Ad esempio il div PAGE
Div centrato rispetto alla pagina e div con
background no-repeat.
#main {
background-color: #ffffff;
background-image: url(img/bkg.jpg);
background-repeat: no-repeat;
position: absolute; // posiziono il div in maniera assoluta riseptto al body
top: 50%; //sposto il div al centro rispetto all’origine del blocco
left: 50%;
height: 324px;
width: 324px;
margin-left: -167px; //ricentro il tutto
margin-top: -167px;
}