Evnen til å strekke bakgrunnsbildet til hele bredden av nettleservinduet ved hjelp av CSS dukket bare opp med lanseringen av den nyeste spesifikasjonen - CSS3. Dessverre, så langt bruker et stort antall surfere tidlige nettlesere som ikke forstår CSS3-spesifikasjonen. Derfor må du ta et valg - enten bruk en mindre praktisk, men nettleserløsning, eller en høyteknologisk, men for et begrenset publikum. La oss vurdere begge alternativene.
Nødvendig
Grunnleggende kunnskap om HTML og CSS
Bruksanvisning
Trinn 1
Det første alternativet er basert på tidligere spesifikasjoner for CSS-språket. Du må lage en HTML-kodestruktur som har to overlappende lag, det ene over det andre. Lag (div) kan strekkes til bredden på skjermen i den gamle kaskadestillingsbeskrivelsen. I bunnen av lagene må du plassere bakgrunnsbildet, og øverst vil du plassere alt innholdet på siden. En slik struktur i hoveddelen av dokumentet kan se slik ut:
Dette vil være innholdet på siden
Og beskrivelsen av stiler for denne strukturen skal plasseres i overskriften. For eksempel dette:
html, kropp {
margin: 0px;
høyde: 100%;
}
#bakgrunn {
posisjon: absolutt;
bredde: 100%;
høyde: 100%;
}
#kropp {
posisjon: absolutt;
bredde: 100%;
høyde: 100%;
z-indeks: 2;
}
Her er lagene med ID-bakgrunn (dette er bakgrunnsbildet ditt) og kropp (dette er laget for sideinnholdet) satt til absolutt posisjonering og 100% bredde og høyde. I tillegg tildeles innholdslaget et serienummer z-indeks = 2. Det bestemmer "dybden" til lagene - jo større det er, jo lenger fra "bunnen" ligger dette laget. I vårt tilfelle vil det være over bakgrunnslaget, som bruker standard z-indeksen.
Steg 2
Den komplette koden kan se slik ut:
html, kropp {
margin: 0px;
høyde: 100%;
}
#bakgrunn {
posisjon: absolutt;
bredde: 100%;
høyde: 100%;
}
#kropp {
posisjon: absolutt;
bredde: 100%;
høyde: 100%;
z-indeks: 2;
}
Dette vil være innholdet på siden
Ikke glem å erstatte bakgrunnsbildefilnavnet fon.png.
Trinn 3
Det andre alternativet vil bruke bakgrunnsstørrelsesegenskapen introdusert i CSS3. På samme tid, legg til lignende egenskaper til stildefinisjonene som tidligere ble brukt av nettleserne Mozilla Firefox, Google Chrome og Opera. Stilbeskrivelsesblokken i denne versjonen kan se slik ut:
html {
bakgrunn: url (fon.png) sentersenter uten repetisjon, fast;
-webkit-bakgrunn-størrelse: omslag;
-moz-bakgrunn-størrelse: omslag;
-o-bakgrunn-størrelse: omslag;
bakgrunnsstørrelse: omslag;
}
Og her, ikke glem å erstatte bakgrunnsbildefilnavnet fon.png. Og i selve selve dokumentet kreves ingen spesielle konstruksjoner i denne versjonen.
