All’interno di questa sezione è possibile gestire tutto ciò che riguarda gli sfondi dei vari elementi (immagini, colori e gradienti), siano essi Contenitori, Componenti o Contenuti.

In perfetto accordo con le specifiche CSS 3 Passweb consente anche di applicare e gestire più immagini di sfondo e/o più gradienti ad uno stesso elemento.

Relativamente alla possibilità di impostare dei background multipli occorre però fare un minimo di chiarezza.

In questo senso va detto infatti che le specifiche CSS2 prevedono che ad un dato elemento possa essere assegnato un solo background e quindi una sola immagine di sfondo.

I CSS3 abbattono invece questo limite consentendo agli sviluppatori di definire, ad esempio, più immagini di sfondo per uno stesso elemento.

Va da se quindi che nel caso in cui si decida di impostare, per uno stesso elemento, più sfondi, questi verranno poi correttamente visualizzati solo ed esclusivamente all’interno di quei browser che supportano effettivamente le specifiche CSS3.

Per maggiori informazioni in merito è possibile consultare, ad esempio, la tabella presente al seguente indirizzo

http://caniuse.com/#feat=multibackgrounds

La specifica CSS3 chiarisce poi un altro fattore molto importante: le immagini di sfondo, così come i gradienti, vengono visualizzate su livelli diversi.

L’immagine definita per prima nella lista apparirà sul primo livello, la seconda su un livello posto dietro al primo, e così via. Il meccanismo, dunque, è simile a quello che regola la proprietà z-index (profondità). La cosa è rilevante, ad esempio, nel caso di immagini che vadano a sovrapporsi o nel caso in cui si utilizzino delle texture.

Per aggiungere una nuova immagine di sfondo è sufficiente utilizzare il pulsante “Aggiungi Nuova Immagine” presente nella parte alta di questa sezione.

Cliccando su questo pulsante verrà infatti visualizzata la maschera di “Gestione Risorse” mediante la quale poter selezionare e/o caricare l’immagine da utilizzare come sfondo dell’elemento su cui si sta lavorando

ATTENZIONE! Come immagine di sfondo è possibile utilizzare anche uno degli attributi attualmente presenti all’interno del proprio Tema Grafico

Per fare questo è sufficiente cliccare sul pulsante “Aggiungi da Tema” posto anch’esso nella parte alta dello style editor e selezionare poi dal relativo menu a tendina l’attributo corrispondente all’immagine desiderata

Per maggiori informazioni relativamente alla gestione dei Temi Grafici in un sito Passweb si veda anche il relativo capitolo “Live Editing - Temi” di questo manuale.

Una volta selezionata l’immagine desiderata, questa verrà inserita nell’elenco sottostante.

Tutti i background specificati verranno inseriti, come precedentemente sottolineato, in livelli sovrapposti ed il primo della lista sarà quello più “vicino” all’utente (quello cioè in primo piano).

E’ possibile variare l’ordine di inserimento (e quindi di sovrapposizione) delle varie immagini inserite come sfondo, in un qualsiasi momento selezionando semplicemente l’immagine da spostare per poi trascinarla nella posizione desiderata.

Il pulsante posto sulla sinistra di ciascuna immagine consente infatti di modificare la posizione dei vari elementi presenti in lista. Portando il mouse su questo pulsante, il cursore assumerà la forma di 4 piccole frecce ad indicare la possibilità di spostare il relativo elemento.

Per effettuare lo spostamento sarà quindi sufficiente trascinare l’elemento selezionato nella posizione desiderata.

Oltre alle immagini di sfondo le specifiche CSS 3 prevedono anche la possibilità di impostare come sfondo di un elemento dei gradienti.

A livello sintattico, si tratta di un valore speciale della proprietà background-image.

In pratica, se prima dei CSS 3 per la proprietà background-image si poteva e doveva specificare necessariamente l’URL dell’immagine da usare come sfondo, ora è possibile utilizzare anche una sfumatura colorata.

Per aggiungere un nuovo gradiente è sufficiente utilizzare il pulsante “Aggiungi Nuovo Gradiente” presente nella parte alta dello style editor.

Cliccando su questo pulsante verrà infatti visualizzata la maschera “Gestione Gradiente”

mediante la quale poter configurare il gradiente che si desidera inserire come sfondo dell’elemento in esame

I campi presenti all’interno della sezione Proprietà Gradiente consentono rispettivamente di:

Tipo: consente di definire la tipologia di gradiente che si intende utilizzare. E’ possibile selezionare uno dei seguenti valori:

• Linear: consente di inserire un gradiente lineare e non ripetitivo

• Repeating Linear: consente di inserire un gradiente lineare e ripetitivo

• Radial: consente di inserire un gradiente radiale e non ripetitivo

• Repeting Radial: consente di inserire un gradiente radile e ripetitivo

Direzione (solo per gradienti lineari): consente di impostare l’angolo mediante il quale poter definire la direzione del gradiente.

Forma (solo per gradienti radiali): consente di impostare la forma, circolare o ellittica, del gradiente.

Posizione (solo per gradienti radiali): consente di impostare la posizione (x e y) del punto di origine del gradiente.

Il pulsante “Aggiungi” presente immediatamente al di sotto dei parametri di configurazione del gradiente consente di aggiungere un nuovo punto colore.

ATTENZIONE! Per poter creare un gradiente è necessario, ovviamente, impostare almeno due diversi punti colore

La sezione “Proprietà Punto Colore Attivo” consente, infine, di impostare l’offset ed il colore per il punto colore attualmente selezionato.

Per ciascuna delle immagini e/o dei gradienti presenti in elenco è possibile gestire, mediante lo style editor, le seguenti proprietà:

• Colore
• Immagine
• Replica
• Posizione
• Dimensionamento
• Maschera
• Incornicia
• Scrolling