Web designer utilizzano Cascading Style Sheet (CSS) le norme per lo stile l'aspetto dei siti web HTML perché forniscono numerose opzioni di stile. Una di queste regole, di cui come la proprietà background, consente al progettista di stile lo sfondo di singoli elementi di codice HTML noto come div. La proprietà background stabilisce un colore di sfondo o applica una immagine come sfondo. Un Div master può essere posizionato in modo tale da stabilire un fondo per l'intero sito.

istruzione

Utilizzando un colore dello sfondo Div

1 Scrivi una regola CSS per il vostro Div e stabilire una proprietà background. L'esempio seguente utilizza la proprietà background-color per lo stile un nuovo Div. La nuova Div viene data una classe di myDiv. La proprietà background-color viene assegnato un valore di rosso. Questa regola CSS attuerà uno sfondo rosso su tutti i div con una classe di .myDiv con uno sfondo rosso.

.myDiv {
background-color: red;
}

2 Applicare la classe di codice HTML Div. Nel seguente esempio, il Div HTML viene assegnato con la classe myDiv. Ciò significa che il testo che appare dopo il tag <div> ma prima del tag <div /> avrà uno sfondo rosso.

<Div class = "myDiv"> Questo è il testo che apparirà sul fondo rosso. </ Div>

3 Assegnare stili aggiuntivi, se necessario. Si può scrivere proprietà aggiuntive per la nuova regola CSS. Dal momento che il testo nero su sfondo rosso non è molto leggibile prossimo esempio modifica la regola myDiv CSS. Si aggiunge la proprietà del colore e assegna la proprietà di colore con un valore di bianco. La proprietà color determina il colore del testo. Il testo sarà ora hanno un colore bianco, che apparirà meglio contro lo sfondo rosso.

.myDiv {
background-color: red;
colore bianco;
}

L'utilizzo di un file di immagine per lo sfondo

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

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

5 Applicare la classe al div HTML.

<Div class = "myDiv"> Questo è il testo che apparirà l'immagine myBackground.gif sopra. </ Div>

6 Utilizzare la proprietà background-position per perfezionare l'aspetto dell'immagine. La proprietà background-position stabilisce la posizione iniziale dell'immagine di sfondo. Alcuni dei valori possibili per la struttura sono a sinistra, a destra e al centro. In questo esempio, la proprietà background-position viene impostata al valore centrale. Ciò significa che l'immagine viene posizionato al centro della Div.

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

7 Applicare la proprietà background-repeat. Questa proprietà determina se l'immagine si ripete una volta l'Div espande oltre la dimensione dell'immagine. I valori possibili sono ripetere, repeat-x, ripetere-y e no-repeat. Il "valore repeat-x", impone che l'immagine viene ripetuta orizzontalmente. Il "valore repeat-y" forzare l'immagine a ripetere in senso verticale. Nell'esempio, la proprietà background-position è impostata su no-repeat. L'impatto netto di questa regola è che il Div avrà un'immagine che utilizza la grafica myBackground.gif, non ripete e viene centrato nel mezzo della Div.

.myDiv {
background-image: URL (myBackground.gif);
background-position: center;
background-repeat: no-repeat;
}

Utilizzare un Div per fornire sfondo per l'intero sito HTML

8 Creare una nuova regola CSS che definisce un Maestro Div. Questo Div copia le proprietà ei valori utilizzati nell'esempio precedente ad un nuovo Div che è stato assegnato l'identità di myMasterdiv.

myMasterDiv {

background-image: URL (myBackground.gif);
background-position: center;
background-repeat: no-repeat;
}

9 Impostare la Div utilizzando la proprietà di posizione, che dice al browser dove posizionare il Div. proprietà associati sono utilizzati per impostare il comportamento larghezza, altezza e posizionamento della 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 Div viene posizionato in relazione agli altri div; e il pallone viene posto su entrambi i lati della Div modo che altri Divs non interferiranno con il master Div.

myMasterDiv {

background-image: URL (myBackground.gif);
background-position: center;
background-repeat: no-repeat;
position: relative;
clear: both;
width: 100%;
height: 100%; }

10 Assegnare il maestro Div al documento HTML appropriato.

<Div id = "myMasterDiv"> Tutto il corpo del contenuto HTML va qui. Apparirà sulla parte superiore del file myBackground.gif </ div>