Ci sono molteplici proprietà che possiamo utilizzare per definire lo sfondo di un elemento.

In particolar modo se lo sfondo è costituito da un'immagine, se ne possono definire dimensione, posizione e comportamento.

Vediamo nello specifico le varie proprietà.

La background images è la proprietà che ci permette appunto di inserire un'immagine di sfondo all'interno di un elemento.

Come si utilizza background image? Bisogna utilizzare la funzione srl e all'interno delle parentesi tonde.

Andare a inserire il percorso dell'immagine sempre all'interno di virgolette.

Il percorso dell'immagine da utilizzare segue le stesse regole che abbiamo visto per il percorso delle immagini da inserire dentro il prc.

È possibile poi utilizzare la proprietà background image anche per andare a definire una sfumatura e quindi quando vedete quei siti che hanno quelle sfumature di sfondo che hanno quei bei colori sono fatte proprio con questa proprietà qui quindi una sfumatura lineare è un linea gradiente.

Per utilizzare linea gradiente è obbligatorio indicare almeno due colori, quindi il colore iniziale da cui parte la sfumatura e il colore finale.

Volendo si possono mettere anche dei colori intermedi, volendo si può specificare anche la direzione della sfumatura, quindi se voglio una sfumatura da sinistra a destra da destra a sinistra.

Una sfumatura in diagonale si può andare a indicare, ma non è obbligatorio.

Di default la sfumatura sarà dall'alto verso il basso.

È possibile puoi andare a indicare una sfumatura radiale di default.

Questa sfumatura radiale ha la forma di un'ellisse, ma volendo si può creare anche una sfumatura circolare, quindi un tondo perfetto.

Anche in questo caso è obbligatorio inserire almeno due colori.

In questo caso il colore iniziale sarà al centro e l'ultimo colore sarà all'estremo all'esterno.

È possibile anche qui andare a inserire dei colori intermedi per fare le sfumature via via concentriche si può appunto definire la forma e la dimensione di questa sfumatura, quindi è come distribuire le sfumature di colori e la posizione.

Quindi se si vuole posizionare al centro in alto, in basso, in un angolo e via dicendo utilizzando questi link si arriva ad una ad una risorsa esterna che che è v tra schools ed è una delle risorse principali che utilizziamo anche nei nostri corsi, perché spiega in parole semplici le proprietà e l'utilizzo base appunto delle varie proprietà, anche con degli esempi.

Quindi, ad esempio, la proprietà del ground Madge ci fa vedere come utilizzare appunto per di un'immagine e cliccando sul virus viene fuori appunto l'esempio con l'immagine di sfondo.

Andando a vedere invece il link per i gradienti abbiamo il link per il linear gradiente, quindi questa è una sfumatura lineare che può essere angolare, quindi dall'angolo in alto a sinistra, l'angolo in basso a destra ad esempio.

Ma di default lui si presenta così, quindi dall'alto al basso.

Questo è un esempio in cui c' è un linea gradiente.

La direzione non è specificata proprio perché è quella di default dall'alto in basso e passa da il rosso al giallo.

Quindi vediamo che il rosso in alto e il giallo in basso e in mezzo c' è appunto il colore sfumato, quindi si passa per una arancione.

Ci sono chiaramente tanti esempi e ci si può anche giochi chiare.

Quindi cliccando su tre yourself anche in questo caso si può modificare il codice.

Quindi se al posto di Aiello, ad esempio mettessi green, clicco su ram e appunto vedo l'effetto finale, quindi vedo la sfumatura che cambia in base a quello che io ho modificato.

Quindi questa è una risorsa veramente valida per imparare e cominciare a mettere le mani in pasta l'ultimo link che abbiamo nella slide è per i radial gradiente, quindi i gradienti, le le sfumature e litiche o circolari.

Quindi di default si presenta così il colore centrale è il primo.

Qui ci sono tre colori, quindi si parte dal rosso e si arriva al verde passando per il giallo.

In questo caso si può appunto andare a specificare le dimensioni, stabilire quanto rosso voglio, quanto verde voglio ad esempio, e appunto impostare la sfumatura circolare qua si può veramente ci si può sbizzarrire, farne di tutti i colori letteralmente.

Vediamo un esempio con un'immagine che è il caso d'uso principale, dunque creiamo sicuramente il nostro contenitore.

Abbiamo ripulito tutto il nostro html teniamo come sempre di base questa regoli nah che va a togliere tutti i margini.

Questa è una best practice che si fa all'inizio di ogni di ogni pagina di ogni sito web e oltre ad azzerare i margini, spesso si azzerano anche i padding e si imposta come abbiamo visto, il boxing border box.

Questa è una regola di base che va ad azzerare margini padding cose che magari noi non vogliamo, che metterebbe il browser in automatico, quindi andiamo a inserire una classe al nostro div ad esempio i manager selezioniamo il divo con la classe madge.

Come al solito diamo delle dimensioni hit trecento pixel wint cinquecento pixel è abbiamo già visto la proprietà background-color e facciamo un esempio giusto per verificare di aver fatto tutto giusto finora.

Quindi abbiamo un rettangolo blu.

Se al posto del del blues di sfondo volessimo andare a utilizzare un'immagine andiamo a utilizzare la funzione srl con le parentesi tonde.

Io mi sono già preparata un'immagine all'interno della cartella mg abbiamo una paperella che la nostra mascotte andiamo a utilizzare questa paperella come immagine di sfondo.

Quindi che cosa dobbiamo scrivere? Srl aperte virgolette il percorso del file quindi andiamo a vedere bene dove si trova il file sempre rispetto al file index html.

Quindi devo entrare all'interno della cartella mg e poi ho il file che si chiama duck punto png.

Aggiorno la pagina e trovo la paperella.

Ora vedo solamente una porzione di questa paperella.

Perché? Perché l'immagine è molto grande, quindi in cinquecento per trecento pixel non ci sta l'intera immagine e quindi che cosa fa il browser me li inserisce partendo dall'angolo in alto a sinistra inserisce la porzione di immagine visibile se io vado ad aumentare le dimensioni di questo contenitore, quindi facciamo ad esempio mettiamola with davanti, così abbiamo larghezza per altezza.

Quindi se io metto ottocento per cinquecento, ad esempio vedro' un pezzo piu' grande di immagine, quindi chiaramente l'immagine, essendo come sfondo va a coprire l'area del suo contenitore.

Quindi per posizionare l'immagine all'interno del riquadro, quindi ridimensionare la è possibile utilizzare diverse soluzioni possiamo utilizzare delle percentuali rispetto all'area da coprire.

Possiamo utilizzare i pixel, quindi dare delle dimensioni fisse all'immagine, oppure possiamo utilizzare delle keyword previste dal browser, come ad esempio cover e container.

Che differenza c'è tra correre con te in cover è un'immagine che riempie l'intera area, quindi l'immagine potrebbe risultare tagliata.

Però siamo sicuri che il contenitore è completamente coperto dall'immagine, mentre conte in inserisce l'immagine per intero nel contenitore e quindi potrebbero esserci delle zone scoperte, per così dire.

Quindi facciamo degli esempi con questa backgrounds, quindi andiamo a inserire background.

Se ad esempio volessimo impostare la misura del cinquanta percento vorrebbe dire che l'immagine va a coprire il cinquanta per cento del mio contenitore per vederlo possa aiutarmi ad esempio con un bordo per delimitare l'area del mio rettangolo.

Quindi un pixel solid black, così vediamo ebrea e voilà, quindi questo è il mio contenitore e vedo che all'interno ci stanno esattamente due paperelle in altezza, ce ne sta un pezzettino.

Se invece io vado a utilizzare la keyword cover vedo che l'immagine si ingrandisce il più possibile per andare a coprire l'intera area del mio contenitore.

Chiaramente le dimensioni dell'immagine non è uguale.

Il rapporto delle dimensioni dell'immagine non è uguale alla dimensione del rettangolo per cui parte dell'immagine viene tagliata utilizzando con te ina l'immagine viene inserita completamente all'interno del contenitore, però, essendo che comunque rimane un pezzettino, viene ripetuta per evitare questa cosa.

Quindi per evitare che l'immagine venga ripetuta, posso utilizzare ad esempio la proprietà background threepeat background repeat indica che cosa fare con l'immagine, quindi se ripeterla all'interno dello sfondo o non ripeterla, quindi inserirla solamente una volta.

Si può anche in alcuni casi andare a specificare se ripeterla solamente lungo l'asse x, quindi in orizzontale o solamente lungo la sepsi, non in verticale.

Andiamo ad applicare il background.

Il background di pitt back ground Threepeat no-repeat Quindi se prima avevamo la paperella ripetuta ora al giorno e c' è solamente una paperella inserita nel mio rettangolo.

Altre proprietà che posso inserire come insomma per migliorare il mio background sono la mente ma soprattutto la position background, mentre una proprietà un po' particolare che si utilizza quando delle immagini come sfondo di un contenitore piuttosto grande.

Quindi se voglio che l'immagine scorra insieme al contenuto oppure se rimanga fissa il contenuto ci scorre sopra tra virgolette quello che si usa molto spesso invece il background position che si va proprio a indicare dove posizionare l'immagine vediamo che di default viene posizionata in alto a sinistra.

Però volendo io posso scegliere che venga posizionata a destra, che venga posizionata al centro e via dicendo.

Quindi andando a impostare background position center ad esempio aggiorno la pagina e la paperella ora si posiziona al centro, quindi sto utilizzando un'immagine di sfondo e la sto inserendo al centro del rettangolo dell' l'area da coprire