Web designer utilizzare regole di Cascading Style Sheet (CSS) di stile l'aspetto dei siti web HTML perché forniscono numerose opzioni di stile. Una di queste regole, indicate come la proprietà background, permette al progettista di stile sullo sfondo dei singoli elementi del codice HTML conosciuto come div. La proprietà background stabilisce un colore di sfondo o si applica un'immagine come sfondo. Un Div master può essere posizionato in un modo che costituisce un fondo per l'intero sito.

Istruzioni

Utilizzando un colore come sfondo del Div

1

Scrivere una regola CSS per il vostro Div e stabilire una proprietà background. Nell'esempio seguente viene utilizzata la proprietà colore di sfondo stile un nuovo div. Il nuovo Div è data una classe di myDiv. La proprietà background-color viene assegnata un valore di colore rosso. Questa regola CSS implementerà una priorità bassa rossa su tutti i div con una classe di .myDiv con uno sfondo rosso.

.myDiv () {
colore di sfondo: rosso;
}

2

Applicare la classe a tua Div. HTML Nell'esempio seguente, l'elemento HTML Div viene assegnato con la classe myDiv. Ciò significa che il testo che viene visualizzato dopo il tag < div > ma prima il < / div > tag avrà uno sfondo rosso.

< div class = "myDiv" > questo è il testo che apparirà sopra il rosso sfondo. < / div >

3

Assegnare stili aggiuntivi se necessario. È possibile scrivere ulteriori proprietà per la nuova regola CSS. Dal testo nero su sfondo rosso non è molto leggibile nell'esempio successivo modifichi la regola CSS myDiv. Aggiunge la proprietà di colore e assegna la proprietà color con un valore di bianco. La proprietà di colore determina il colore del testo. Il testo ora avranno un colore bianco, che mostrerà meglio contro lo sfondo rosso.

.myDiv () {
colore di sfondo: rosso;
colore: bianco;
}

Utilizzando un File di immagine per lo sfondo

4

Scrivere una nuova regola CSS e assegnare un'immagine di sfondo con la proprietà background-image. La proprietà background-image dice al browser di caricare un file immagine come sfondo. Questo esempio utilizza l'immagine di myBackground.gif come sfondo per tutti i div con classe di myDiv.

.myDiv () {
background-image:URL(myBackground.gif);
}

5

Applicare la classe al Div. HTML

< div class = "myDiv" > questo è il testo che verrà visualizzato sopra l'immagine myBackground.gif. < / div >

6

Utilizzare la proprietà background-position per ottimizzare l'aspetto dell'immagine. La proprietà background-position stabilisce la posizione iniziale dell'immagine di sfondo. Sinistra, destra e centro sono alcuni dei valori possibili per la proprietà. In questo esempio, la proprietà background-position è impostata nel valore centrale. Ciò significa che l'immagine verrà posizionato al centro del div.

.myDiv () {
background-image:URL(myBackground.gif);
sfondo-posizione: in centro;
}

7

Applicare la proprietà background-repeat. Questa proprietà determina se l'immagine verrà ripetuta una volta che il Div si espande oltre la dimensione dell'immagine. I valori possibili includono ripetere, repeat-x, repeat-y e no-repeat. Il "valore repeat-x" indica che l'immagine viene ripetuta orizzontalmente. Il "valore repeat-y" forza l'immagine di ripetere verticalmente. Nell'esempio, la proprietà background-position è impostata su no-repeat. L'effetto netto di questa regola è che il Div avrà un'immagine che utilizza l'immagine di myBackground.gif, non si ripete ed è centrata al centro del div.

.myDiv () {
background-image:URL(myBackground.gif);
sfondo-posizione: in centro;
background-repeat: no-repeat;
}

Utilizzare un Div per fornire sfondo per tutto il sito HTML

8

Creare una nuova regola CSS che definisce un Master div. Questo Div copia le proprietà e i valori utilizzati nell'esempio precedente per un nuovo Div che è stato assegnato l'identità del myMasterdiv.

myMasterDiv () {

background-image:URL(myBackground.gif);
sfondo-posizione: in centro;
background-repeat: no-repeat;
}

9

Impostare il Div utilizzando la proprietà position, che dice al browser web dove posizionare il compagno div. proprietà vengono utilizzate per impostare la larghezza, altezza e comportamento di posizionamento del div. Nel caso seguente, quattro di queste regole vengono applicate: la larghezza e l'altezza si espanderà per riempire il 100 per cento dello schermo; il tag Div viene posizionato in relazione gli altri div; e una clearance è collocata su entrambi i lati del Div in modo che altri Divs non interferirà con il Maestro div.

myMasterDiv () {

background-image:URL(myBackground.gif);
sfondo-posizione: in centro;
background-repeat: no-repeat;
Posizione: parente;
chiaro: entrambi;
Larghezza: 100%;
Altezza: 100%; }

10

Assegnare il Div master al documento HTML appropriato.

< div id = "myMasterDiv" > tutto il corpo del contenuto HTML va qui. Apparirà in cima il file myBackground.gif < / div >