Sfondo, finestra di dialogo Generatore di stile

Articolo
09/12/2008

Aggiornamento: novembre 2007

La pagina Sfondo della finestra di dialogo Generatore di stile consente di impostare gli attributi di uno stile CSS per la definizione di un'immagine o di un colore di sfondo quando lo stile viene applicato a una pagina o a una tabella HTML. È possibile applicare questi attributi direttamente agli elementi HTML oppure aggiungerli alle regole di stile CSS.

Per applicare gli attributi di sfondo direttamente agli elementi HTML della pagina

Aprire il documento HTML nella visualizzazione Progettazione della finestra di progettazione HTML e selezionare l'elemento da formattare.
Scegliere Stile dal menu Formato per aprire la finestra di dialogo Generatore di stile.
Scegliere Sfondo nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Sfondo.

Quando si formattano elementi selezionati nella visualizzazione Progettazione, gli attributi di stile CSS vengono inseriti inline nel markup HTML della pagina. Passare alla visualizzazione HTML per verificare i nuovi attributi di stile inseriti.

Per aggiungere gli attributi di sfondo a una regola di stile CSS definita in un foglio di stile esterno

Aprire un foglio di stile esterno e posizionare il punto di inserimento all'interno delle parentesi graffe ({ }) che seguono il selettore dello stile desiderato.
Scegliere Compila stile dal menu Stili per aprire la finestra di dialogo Generatore di stile.
Scegliere Sfondo nel riquadro sinistro della finestra di dialogo Generatore di stile.

Nel riquadro destro verrà visualizzata la finestra di dialogo Generatore di stile, Sfondo.

Nota:
Il menu Stili viene visualizzato quando si apre un foglio di stile CSS esterno per la modifica. L'opzione Compila stile del menu Stili diviene disponibile quando si posiziona il punto di inserimento tra le parentesi graffe che seguono il selettore di una regola di stile.

La classe di uno stile CSS definita in un foglio di stile esterno può essere applicata a un elemento interno all'elemento <BODY> di una pagina Web (in questo caso è incluso lo stesso elemento <BODY>) assegnando il selettore di stile CSS come proprietà CLASS per l'elemento desiderato.

Le opzioni disponibili nella pagina Sfondo della finestra di dialogo Generatore di stile comprendono:

Attività

Elementi di interfaccia

Colore di sfondo

Colore
Consente di impostare l'attributo BACKGROUND-COLOR per lo stile. Selezionare un'opzione dall'elenco a discesa o scegliere il pulsante con i puntini di sospensione (...) per aprire la finestra di dialogo Selezione colori e selezionare ulteriori colori. Se, ad esempio, si seleziona Rosso, verrà inserito il seguente markup CSS:

BACKGROUND-COLOR: red
Trasparente
Questa casella di controllo viene utilizzata per impostare l'attributo BACKGROUND-COLOR al valore transparent. Se si seleziona transparent, non è possibile selezionare un colore di sfondo. Viene inserito il seguente codice:

BACKGROUND-COLOR: transparent

Immagine di sfondo

Immagine
Consente di impostare l'immagine che verrà visualizzata dallo stile come sfondo. Immettere un percorso e un nome file nel campo o scegliere il pulsante con i puntini di sospensione (...) per aprire Selezione URL e selezionare il percorso dell'immagine. Se, ad esempio, si seleziona un'immagine denominata Background.bmp presente nella cartella Immagini, verrà inserito il seguente codice:

BACKGROUND-IMAGE: url (images/background.bmp)

Affiancamento
Consente di impostare gli attributi di affiancamento per l'immagine di sfondo assegnata dallo stile. Le immagini possono essere affiancate in modi diversi, come mostrato nella seguente tabella:

Attributo di affiancamento	Descrizione
Affianca in direzione orizzontale	L'immagine viene affiancata da sinistra a destra nella pagina, non dall'alto verso il basso.
Affianca in direzione verticale	Le immagini vengono affiancate solo una volta dall'alto verso il basso.
Affianca in entrambe le direzioni	Le immagini vengono affiancate orizzontalmente e verticalmente.
Non affiancare	Consente di disabilitare l'affiancamento; l'immagine viene visualizzata nella posizione specificata dal valore della posizione e non viene ripetuta.
<Non impostato>	Nessuna opzione scelta; non viene aggiunto codice allo stile.

Se, ad esempio, si sceglie Affianca in direzione orizzontale, verrà inserito il seguente markup CSS:

BACKGROUND-REPEAT:repeat-x

Nota:
°Gli attributi di affiancamento interagiscono con gli attributi di posizione. Se si posiziona l'immagine, gli attributi di affiancamento vengono applicati in base alla posizione iniziale dell'immagine sulla pagina. Se, ad esempio, si posiziona un'immagine nell'angolo superiore sinistro di una pagina e si affianca solo orizzontalmente, l'immagine verrà ripetuta lungo il margine superiore della pagina.

°Gli attributi di affiancamento interagiscono con gli attributi di posizione. Se si posiziona l'immagine, gli attributi di affiancamento vengono applicati in base alla posizione iniziale dell'immagine sulla pagina. Se, ad esempio, si posiziona un'immagine nell'angolo superiore sinistro di una pagina e si affianca solo orizzontalmente, l'immagine verrà ripetuta lungo il margine superiore della pagina.

Scorrimento
Consente di impostare l'attributo BACKGROUND-ATTACHMENT per l'immagine di sfondo applicata dallo stile. Selezionare un valore dall'elenco a discesa. Un'immagine può rimanere fissa mentre la pagina scorre oppure scorrere mentre il testo e le immagini restano sullo sfondo. Selezionare <Non impostato> (nessuna opzione scelta), Sfondo scorrevole o Sfondo fisso. Se, ad esempio, si sceglie Sfondo scorrevole verrà inserito il seguente markup CSS:

BACKGROUND-ATTACHMENT:scrolling

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Nota:
Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.

Posizione
Consente di impostare gli attributi di posizione per l'immagine di sfondo applicata dallo stile. Il valore di posizione è correlato agli attributi di affiancamento. Se si imposta una posizione per lo sfondo e non si scelgono gli attributi di affiancamento, l'immagine di sfondo rimane fissa nella posizione specificata. Se si imposta una posizione per lo sfondo e si scelgono gli attributi di affiancamento, la posizione serve da punto di partenza per tali attributi.

Nota:
È necessario selezionare entrambi i valori di posizione orizzontale e verticale. Se si specifica solo un valore, verrà visualizzato un nome di proprietà non valido nell'editor CSS. Quando si selezionano entrambi i valori di posizione orizzontale e verticale, la proprietà viene visualizzata correttamente come BACKGROUND-POSITION. Un esempio di una dichiarazione di posizione di sfondo valida è BACKGROUND-POSITION:left center.

È necessario selezionare entrambi i valori di posizione orizzontale e verticale. Se si specifica solo un valore, verrà visualizzato un nome di proprietà non valido nell'editor CSS. Quando si selezionano entrambi i valori di posizione orizzontale e verticale, la proprietà viene visualizzata correttamente come BACKGROUND-POSITION. Un esempio di una dichiarazione di posizione di sfondo valida è BACKGROUND-POSITION:left center.

Orizzontale
Consente di impostare la posizione orizzontale per l'immagine di sfondo applicata dallo stile. Selezionare <Non impostato> (nessuna opzione scelta), A sinistra, Centrato, A destra o Personalizzato. Se si seleziona Personalizzato, saranno disponibili i campi a destra dell'opzione. Il valore predefinito è 50%. Immettere un valore nel campo del numero e scegliere un incremento (px, pt, pc, mm, cm, in, em, ex o %) dall'elenco a discesa del campo delle unità. Se si sceglie Personalizzato e si accettano i valori predefiniti, verrà inserito il seguente markup CSS:

BACKGROUND-POSITION:50%

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.
Verticale
Consente di impostare la posizione verticale per l'immagine di sfondo applicata dallo stile. Selezionare un'opzione dall'elenco a discesa: <Non impostato> (nessuna opzione scelta), A sinistra, Centrato, A destra o Personalizzato. Se si seleziona Personalizzato, saranno disponibili i campi a destra dell'opzione. Il valore predefinito è 50%. Immettere un valore nel campo del numero e scegliere un'opzione di unità (px, pt, pc, mm, cm, in, em, ex o %) dall'elenco a discesa del campo delle unità. Se si sceglie Personalizzato e si accettano i valori predefiniti, verrà inserito il seguente markup CSS:

BACKGROUND-POSITION:50%

Nota:

Quando l'attributo è <Non impostato>, non viene aggiunto codice allo stile.
Non usare immagini di sfondo
Quando selezionata, consente di rimuovere l'immagine di sfondo dalla pagina corrente. Gli attributi dell'immagine non sono disponibili nella finestra di dialogo. Se per la pagina è stata specificata un'immagine, la proprietà BACKGROUND-IMAGE verrà rimossa dallo stile dopo avere scelto OK.