Met de HTML-opmaaktaal kan een webontwerper elke afbeelding als achtergrondafbeelding gebruiken. De taal zelf mist echter ingebouwde bedieningselementen voor achtergrondafbeeldingen. Meer fijnafstemming wordt gedaan met behulp van trapsgewijze CSS-stylesheets.
instructies:
Stap 1
Om de achtergrond uit te rekken tot de volledige breedte van de browser, moet je de z-index parameter in je CSS gebruiken. Hiermee kunt u de volgorde bepalen van de elementen die u maakt. Hoe hoger de waarde van dit kenmerk, hoe hoger het blok op de pagina zal worden geplaatst.
Stap 2
Maak nieuwe documenten in html- en css-indeling (rechtermuisknop - "Nieuw" - "Tekstbestand") en open ze met een willekeurige teksteditor.
Stap 3
Plaats de achtergrondafbeelding op de onderste laag. Het zal uitrekken afhankelijk van de schermresolutie. Bovenaan komt een ander element te staan waarop de pagina-inhoud wordt weergegeven. Maak hiervoor twee blokken. Schrijf in het css-bestand:.1laag {z-index: 1; breedte: 100% hoogte: 100% positie: absoluut;} 2laags {positie: absoluut;z-index: 2; } Met de parameter position: absolute kunt u de absolute positionering instellen, d.w.z. de laag wordt onafhankelijk van andere elementen gepositioneerd.
Stap 4
Neem de gegenereerde CSS-code op in het HTML-bestand met behulp van de link-tag: Pagina-achtergrond
Stap 5
Maak een nieuwe laag. De tag gebruiken
plaats er een foto op. Bijvoorbeeld: Pagina-inhoud Voor img wordt alleen de breedte-parameter opgegeven, omdat als u extra hoogte opgeeft, in sommige browsers beeldvervorming optreedt.
Stap 6
Sla uw wijzigingen op. Om uw code te testen, vergroot u de pagina in uw browservenster. De achtergrondafbeelding moet ook worden vergroot.
