Evnen til at strække baggrundsbilledet til hele bredden af browservinduet ved hjælp af CSS dukkede kun op med frigivelsen af dets seneste specifikation - CSS3. Desværre bruger et stort antal web-surfere hidtil tidlige browsere, der ikke forstår CSS3-specifikationen. Derfor er du nødt til at træffe et valg - enten brug en mindre praktisk, men cross-browser-løsning eller en high-tech, men for et begrænset publikum. Lad os overveje begge muligheder.
Nødvendig
Grundlæggende viden om HTML og CSS
Instruktioner
Trin 1
Den første mulighed er baseret på tidligere specifikationer for CSS-sproget. Du skal oprette en HTML-kodestruktur, der har to overlappende lag, det ene over det andet. Lag (div) kan strækkes til bredden af skærmen i den gamle kaskadestillingsbeskrivelse sprogspecifikation. I bunden af lagene skal du placere baggrundsbilledet, og øverst placerer alt indholdet på siden. En sådan struktur i dokumentets krop kan se sådan ud:
Dette vil være indholdet af siden
Og beskrivelsen af stilarter til denne struktur skal placeres i overskriftsdelen. For eksempel dette:
html, krop {
margen: 0px;
højde: 100%;
}
#baggrund {
position: absolut;
bredde: 100%;
højde: 100%;
}
#krop {
position: absolut;
bredde: 100%;
højde: 100%;
z-indeks: 2;
}
Her er lagene med ID-baggrund (dette er dit baggrundsbillede) og body (dette er laget til sideindholdet) indstillet til absolut positionering og 100% bredde og højde. Derudover tildeles indholdslaget et serienummer z-index = 2. Det bestemmer lagets "dybde" - jo større det er, jo længere fra "bunden" er dette lag placeret. I vores tilfælde vil det være over baggrundslaget, der bruger standard z-indekset.
Trin 2
Den komplette kode kan se sådan ud:
html, krop {
margen: 0px;
højde: 100%;
}
#baggrund {
position: absolut;
bredde: 100%;
højde: 100%;
}
#krop {
position: absolut;
bredde: 100%;
højde: 100%;
z-indeks: 2;
}
Dette vil være indholdet af siden
Glem ikke at udskifte baggrundsbillede filnavnet fon.png.
Trin 3
Den anden mulighed bruger egenskaben baggrundsstørrelse, der blev introduceret i CSS3. På samme tid skal du tilføje lignende egenskaber til de stildefinitioner, der tidligere blev brugt af browserne Mozilla Firefox, Google Chrome og Opera. Stilbeskrivelsesblokken i denne version kan se sådan ud:
html {
baggrund: url (fon.png) ikke-gentag centercenter fast;
-webkit-baggrundsstørrelse: omslag;
-moz-baggrundsstørrelse: omslag;
-o-baggrundsstørrelse: omslag;
baggrundsstørrelse: omslag;
}
Og glem ikke her at erstatte baggrundsbillede filnavnet fon.png. Og i selve dokumentet kræves der ingen specielle konstruktioner i denne version.
