Hvordan bruke DIV i en HTML Bakgrunn

Webdesignere bruke Cascading Style Sheet (CSS) regler for å style utseendet på HTML nettsteder fordi de gir mange stil alternativer. En av disse reglene, referert til som bakgrunn eiendom, gjør det mulig for designeren å style på bakgrunn av enkeltelementer med HTML-kode som kalles Divs. Bakgrunnen Eiendommen etablerer en bakgrunnsfarge eller gjelder et bilde som bakgrunn. En master Div kan plasseres på en måte som etablerer en bakgrunn for hele området.

Bruksanvisning

Ved hjelp av en farge som Div Bakgrunn

1 Skriv en CSS-regel for Div og etablere en bakgrunn eiendom. Følgende eksempel bruker background-color eiendom for å style en ny Div. Den nye Div gis en klasse av myDiv. Den background-color eiendommen er tildelt en verdi av rødt. Dette CSS regelen vil gjennomføre en rød bakgrunn på alle Divs med en klasse for .myDiv med rød bakgrunn.

.myDiv {
background-color: red;
}

2 Påfør klasse til HTML Div. I det følgende eksempel er HTML Div tildelt med myDiv klassen. Dette betyr at teksten som vises etter <div> tag men før </ div> tag vil ha en rød bakgrunn.

<Div class = "myDiv"> Dette er teksten som vises over den røde bakgrunnen. </ Div>

3 Tildele flere stiler som nødvendig. Du kan skrive flere egenskaper til den nye CSS-regel. Siden svart tekst på rød bakgrunn er ikke veldig lesbart neste eksempel supplerer myDiv CSS regelen. Den legger fargen eiendom og tildeler den fargen eiendom med en verdi på hvitt. Fargen egenskap bestemmer fargen på teksten. Teksten vil nå ha en hvit farge, som vil vise seg bedre mot rød bakgrunn.

.myDiv {
background-color: red;
Farge: hvit;
}

Ved hjelp av en bildefil for bakgrunns

4 Skriv en ny CSS-regel og tilordne et bilde bakgrunn med bakgrunnsbilde eiendom. Den background-image eiendom forteller nettleseren til å laste en bildefil som bakgrunn. Denne prøven bruker myBackground.gif bilde som bakgrunn for alle Divs med klassen av myDiv.

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

5 Påfør klasse til HTML Div.

<Div class = "myDiv"> Dette er teksten som vises over myBackground.gif bildet. </ Div>

6 Utnytte background-position for å finjustere utseendet på bildet. Bakgrunnen-posisjon eiendom etablerer utgangsstillingen av bakgrunnsbildet. Noen av de mulige verdier for eiendommen inkluderer venstre, høyre og sentrum. I dette eksempel er bakgrunnen-stillingen egenskap satt til midtverdien. Dette betyr at bildet vil bli plassert i sentrum av Div.

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

7 Påfør background-repeat eiendom. Denne egenskapen avgjør om bildet vil gjenta når Div utvides utover størrelsen på bildet. Mulige verdier gjenta, gjenta-x, gjenta-y og no-repeat. Den "repeat-x-verdi" tilsier at bildet er gjentatt horisontalt. Den "repeat-y-verdi" tvinge bilde å gjenta vertikalt. I eksemplet er bakgrunnen-posisjon eiendommen er satt til no-repeat. Nettoeffekten av denne regelen er at Div vil ha et bilde som bruker myBackground.gif grafikk, ikke gjenta og er sentrert i midten av Div.

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

Bruk en Div å gi bakgrunns for hele HTML nettstedet

8 Opprett en ny CSS-regel som definerer en Master Div. Dette Div kopierer egenskaper og verdier som brukes i forrige eksempel til en ny Div som er blitt tildelt identitet myMasterdiv.

myMasterDiv {

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

9 Sett Div bruker stilling eiendom, som forteller nettleseren hvor du vil plassere Div. Companion egenskapene brukes til å stille inn bredde, høyde og posisjonering oppførsel av div. I det følgende tilfelle er fire av disse reglene anvendt: bredden og høyden vil ekspandere for å fylle 100 prosent av skjermen; div er plassert i forhold til de andre Divs; og en klaring er plassert på begge sider av Div slik at andre Divs ikke vil interferere med hoved Div.

myMasterDiv {

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

10 Tildele master Div til riktig HTML-dokumentet.

<Div id = "myMasterDiv"> All av kroppen av HTML-innholdet går her. Den vil vises på toppen av myBackground.gif fil </ div>