Möjligheten att sträcka bakgrundsbilden till webbläsarens hela bredd med CSS uppträdde bara med lanseringen av den senaste specifikationen - CSS3. Tyvärr har hittills ett stort antal webbsurfare använt tidiga webbläsare som inte förstår CSS3-specifikationen. Därför måste du göra ett val - antingen använda en mindre praktisk men webbläsarlösning eller en högteknologisk, men för en begränsad publik. Låt oss överväga båda alternativen.
Nödvändig
Grundläggande kunskaper om HTML och CSS
Instruktioner
Steg 1
Det första alternativet är baserat på tidigare specifikationer för CSS-språket. Du måste skapa en HTML-kodstruktur som har två överlappande lager, varandra ovanför varandra. Lager (div) kan sträckas till skärmens bredd i den gamla kaskadbeskrivningsspråkspecifikationen. I botten av lagren måste du placera bakgrundsbilden och i det övre kommer allt innehåll på sidan att placeras. En sådan struktur i dokumentets kropp kan se ut så här:
Detta kommer att vara innehållet på sidan
Och beskrivningen av stilar för denna struktur bör placeras i rubrikdelen. Till exempel detta:
html, body {
marginal: 0px;
höjd: 100%;
}
#background {
position: absolut;
bredd: 100%;
höjd: 100%;
}
#body {
position: absolut;
bredd: 100%;
höjd: 100%;
z-index: 2;
}
Här är lagren med ID-bakgrund (detta är din bakgrundsbild) och body (detta är lagret för sidinnehållet) inställda på absolut positionering och 100% bredd och höjd. Dessutom tilldelas innehållsskiktet ett serienummer z-index = 2. Det bestämmer lagrets "djup" - ju större det är, desto längre från "botten" ligger detta lager. I vårt fall kommer det att ligga ovanför bakgrundsskiktet, som använder standard z-index.
Steg 2
Den fullständiga koden kan se ut så här:
html, body {
marginal: 0px;
höjd: 100%;
}
#background {
position: absolut;
bredd: 100%;
höjd: 100%;
}
#body {
position: absolut;
bredd: 100%;
höjd: 100%;
z-index: 2;
}
Detta kommer att vara innehållet på sidan
Glöm inte att ersätta bakgrundsbildens filnamn fon.png.
Steg 3
Det andra alternativet använder egenskapen bakgrundsstorlek som introducerades i CSS3. Lägg samtidigt till liknande egenskaper till stildefinitionerna som tidigare användes av webbläsarna Mozilla Firefox, Google Chrome och Opera. Stilbeskrivningsblocket i den här versionen kan se ut så här:
html {
bakgrund: url (fon.png) centrum upprepas utan upprepning;
-webkit-bakgrundsstorlek: omslag;
-moz-bakgrundsstorlek: omslag;
-o-bakgrundsstorlek: omslag;
bakgrundsstorlek: omslag;
}
Och glöm inte att ersätta filnamnet för bakgrundsbilden fon.png. Och i själva dokumentet krävs inga speciella konstruktioner i den här versionen.
