Float - ripresa. Float left: dispone a pila tutti i div sulla sinistra.

Presentazione sul tema: "Float - ripresa. Float left: dispone a pila tutti i div sulla sinistra."— Transcript della presentazione:

1 Float - ripresa

2 Float left: dispone a pila tutti i div sulla sinistra

3 Float right: dispone a pila tutti i div sulla destra

4 Posizionamento background

5 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à background- position che stabilisce come vengono posizionati gli sfondi con le parole chiavi per la posizione: div.box{background: url(pic.png) left top} /* in alto a sinistra div.box{background: url(pic.png) center} /* al centro */ div.box{background: url(pic.png) bottom right} /* in basso a destra */ div.box{background: url(pic.png) right center} /* in centro a destra */

6 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

7 È 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

8 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}

9 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; Posizionamento background full screen sfondo pagina con cover

10 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

11 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.

12 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; }

13 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*/

14

15 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 html{ background: url(img/gradient.jpg) repeat- x top; background-color: #E6E6E6; }

16 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

17 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; }