De mogelijkheid om de achtergrondafbeelding uit te rekken tot de volledige breedte van het browservenster met behulp van CSS verscheen pas met de release van de nieuwste specificatie - CSS3. Helaas gebruikt een groot aantal websurfers tot nu toe vroege browsers die de CSS3-specificatie niet begrijpen. Daarom moet je een keuze maken - ofwel een minder handige, maar cross-browser oplossing gebruiken, of een hightech, maar voor een beperkt publiek. Laten we beide opties overwegen.
Noodzakelijk
Basiskennis van HTML en CSS
instructies:
Stap 1
De eerste optie is gebaseerd op eerdere specificaties van de CSS-taal. U moet een HTML-codestructuur maken met twee overlappende lagen, de een boven de ander. Lagen (div) kunnen worden uitgerekt tot de breedte van het scherm in de oude specificatie van de taalbeschrijving voor trapsgewijze stijl. Onderaan de lagen moet u de achtergrondafbeelding plaatsen en in de bovenste plaatst u alle inhoud van de pagina. Een dergelijke structuur in de hoofdtekst van het document kan er als volgt uitzien:
Dit wordt de inhoud van de pagina
En de beschrijving van stijlen voor deze structuur moet in het kopgedeelte worden geplaatst. Bijvoorbeeld dit:
html, lichaam {
marge: 0px;
hoogte: 100%;
}
#achtergrond {
positie: absoluut;
breedte: 100%;
hoogte: 100%;
}
#lichaam {
positie: absoluut;
breedte: 100%;
hoogte: 100%;
z-index: 2;
}
Hier zijn de lagen met ID's background (dit is je achtergrondafbeelding) en body (dit is de laag voor de pagina-inhoud) ingesteld op absolute positionering en 100% breedte en hoogte. Bovendien krijgt de inhoudslaag een serienummer z-index = 2 toegewezen. Het bepaalt de "diepte" van de lagen - hoe groter deze is, hoe verder van de "onderkant" deze laag zich bevindt. In ons geval bevindt het zich boven de achtergrondlaag, die de standaard z-index gebruikt.
Stap 2
De volledige code kan er als volgt uitzien:
html, lichaam {
marge: 0px;
hoogte: 100%;
}
#achtergrond {
positie: absoluut;
breedte: 100%;
hoogte: 100%;
}
#lichaam {
positie: absoluut;
breedte: 100%;
hoogte: 100%;
z-index: 2;
}
Dit wordt de inhoud van de pagina
Vergeet niet de bestandsnaam van de achtergrondafbeelding fon.
Stap 3
De tweede optie gebruikt de eigenschap background-size die in CSS3 is geïntroduceerd. Voeg tegelijkertijd vergelijkbare eigenschappen toe aan de stijldefinities die eerder werden gebruikt door de browsers Mozilla Firefox, Google Chrome en Opera. Het stijlbeschrijvingsblok in deze versie kan er als volgt uitzien:
html {
background: url (fon.png) no-repeat center center vast;
-webkit-achtergrondgrootte: omslag;
-moz-achtergrondgrootte: omslag;
-o-achtergrondgrootte: omslag;
achtergrondformaat: omslag;
}
En vergeet hier niet de bestandsnaam van de achtergrondafbeelding fon.png"
