La maggior parte dei siti web utilizzano immagini di sfondo statiche che o spettacolo in un punto dello schermo o ripetere in orizzontale, in verticale o in una ripetizione di tegole. È possibile, tuttavia, fare un tratto di fondo pure. Questo trucco è utile quando si vuole progettare una grande grafica per lo sfondo del tuo sito web. L'aggiunta di uno sfondo che si estende a una pagina Web richiede un po 'di lavoro extra però. È necessario modificare il codice HTML, così come le (Cascading Style Sheets) CSS codice.

istruzione

1 Aprire il foglio di stile per la pagina Web in Blocco note o un editor di codice. Trova regola di stile del corpo:

body {
}

2 Aggiungere una altezza 100 per cento per il corpo all'interno della sua regola di stile. Anche dare al corpo un margine zero pixel e padding zero pixel:

body {
height: 100%;
margin: 0;
padding: 0;
}

3 Creare una nuova regola di stile per un nome ID "background" e aggiungere una larghezza di 100 per cento e l'altezza:

sfondo {

width: 100%;
height: 100%;
}

4 Dare la regola di fondo una posizione fissa a zero pixel dalla parte superiore e zero pixel da sinistra del bordo dello schermo del browser:

sfondo {

width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}

5 Aggiungere una regola di stile per il contenuto della pagina Web. Questa regola di stile ha bisogno di una posizione relativa e "z-index" valore di uno o più alto per rendere il soggiorno contenuto sopra lo sfondo:

contenuto {

position: relative;
z-index: 1;
}

Se il codice CSS contiene altre proprietà "z-index", assicurarsi che il valore si dà il contenuto è inferiore a qualsiasi cosa che ha bisogno di visualizzare sulla parte superiore del contenuto.

6 Aprire la pagina Web in un editor e avvolgere un paio di "<div>" tag intorno al vostro intero contenuto. Dare i tag nome ID di "contenuto":

<Div id = "content">

Page content here...

</ Div>

7 Aggiungere sull'immagine sopra "<div>" tag del contenuto e dargli un ID di Impostare la "src" attributo per il percorso del file e il nome dell'immagine di sfondo che si desidera "background".:

<Img src = "path / to / background.png" id = "background" />

Consigli e avvertenze

• Rimuovere il "height: 100%;" linea dalla regola di stile del fondo se desideri solo lo sfondo per allungare orizzontalmente.
• Quando si progetta un'immagine di sfondo che si desidera allungare attraverso lo schermo tenere a mente quello schermo dimensioni variano ampiamente e distorcono l'immagine.