Die moontlikheid om die agtergrondafbeelding tot op die volle breedte van die blaaiervenster met behulp van CSS te rek, verskyn eers met die bekendmaking van die nuutste spesifikasie - CSS3. Ongelukkig gebruik 'n groot aantal webbranderryers tot dusver vroeë blaaiers wat nie die CSS3-spesifikasie verstaan nie. Daarom moet u 'n keuse maak - gebruik 'n minder gerieflike, maar kruis-blaaier-oplossing, of 'n hoëtegnologie, maar vir 'n beperkte gehoor. Kom ons kyk na albei opsies.
Nodig
Basiese kennis van HTML en CSS
Instruksies
Stap 1
Die eerste opsie is gebaseer op vroeëre spesifikasies van die CSS-taal. U moet 'n HTML-kodestruktuur skep wat twee oorvleuelende lae het, een bo die ander. Lae (div) kan tot die breedte van die skerm gerek word in die ou beskrywingstaalbeskrywing. Onder in die lae moet u die agtergrondprent plaas, en die boonste sal al die inhoud van die bladsy plaas. So 'n struktuur in die liggaam kan so lyk:
Dit is die inhoud van die bladsy
En die beskrywing van style vir hierdie struktuur moet in die opskrifgedeelte geplaas word. Byvoorbeeld, hierdie:
html, liggaam {
marge: 0px;
hoogte: 100%;
}
# agtergrond {
posisie: absoluut;
breedte: 100%;
hoogte: 100%;
}
#liggaam {
posisie: absoluut;
breedte: 100%;
hoogte: 100%;
z-indeks: 2;
}
Hier word die lae met ID's-agtergrond (dit is u agtergrondafbeelding) en liggaam (dit is die laag vir die bladsyinhoud) op absolute posisie gestel en 100% breedte en hoogte. Daarbenewens kry die inhoudslaag 'n reeksnommer z-index = 2. Dit bepaal die "diepte" van die lae - hoe groter dit is, hoe verder van die "onderkant" hierdie laag is. In ons geval sal dit bo die agtergrondlaag wees, wat die standaard z-indeks gebruik.
Stap 2
Die volledige kode kan so lyk:
html, liggaam {
marge: 0px;
hoogte: 100%;
}
# agtergrond {
posisie: absoluut;
breedte: 100%;
hoogte: 100%;
}
#liggaam {
posisie: absoluut;
breedte: 100%;
hoogte: 100%;
z-indeks: 2;
}
Dit is die inhoud van die bladsy
Moenie vergeet om die lêernaam agtergrondprent fon.
Stap 3
Die tweede opsie sal die agtergrond-grootte eiendom gebruik wat in CSS3 bekendgestel is. Voeg terselfdertyd soortgelyke eienskappe by die styldefinisies wat voorheen deur die blaaiers Mozilla Firefox, Google Chrome en Opera gebruik is. Die stylbeskrywingsblok in hierdie weergawe kan so lyk:
html {
agtergrond: url (fon.png) sentrum is nie herhaal nie;
-webkit-agtergrond-grootte: omslag;
-moz-agtergrond-grootte: omslag;
-o-agtergrond-grootte: omslag;
agtergrond-grootte: omslag;
}
En vergeet hier nie om die agtergrondprentlêernaam fon.png"
