Hoe Maak Je Achtergrond In Html

Inhoudsopgave:

Hoe Maak Je Achtergrond In Html
Hoe Maak Je Achtergrond In Html

Video: Hoe Maak Je Achtergrond In Html

Video: Hoe Maak Je Achtergrond In Html
Video: how to add background image in html 2024, April
Anonim

Een webpagina met een achtergrond ziet er vaak mooier uit dan zonder. De juistheid van de weergave van de webpagina hangt af van de competente acties om de achtergrond toe te voegen.

Hoe maak je achtergrond in html
Hoe maak je achtergrond in html

instructies:

Stap 1

De eenvoudigste manier om een achtergrond in een html-document te maken, is door de attribuutwaarde toe te wijzen aan de body-tag. Een bepaalde waarde voor het attribuut background bepaalt de achtergrondafbeelding op de pagina. Als u de waarde van het attribuut bgcolor instelt, krijgt de pagina een achtergrondkleur. De kleur in het bgcolor-attribuut van de body-tag kan in hexadecimaal of in één woord worden opgegeven.

Stap 2

U kunt hetzelfde effect bereiken door trapsgewijze CSS-stijlbladen te gebruiken. Een waarde voor het attribuut background-color bepaalt de achtergrondkleur op de pagina, terwijl een waarde voor het attribuut background-image het pad naar de achtergrondafbeelding van de pagina bepaalt. Deze instructies kunnen naar de bodyselector worden geschreven. Je kunt het ook anders doen: wijs een class of identifier toe aan de body-tag in de html-tag, en wijs de bovenstaande attributen toe aan respectievelijk de class of identifier in css. Houd er alleen rekening mee dat als de attributen zijn toegewezen aan een klasse, alle objecten met de opgegeven klasse een achtergrondkleur zullen hebben in het html-document.

Stap 3

De bovenstaande instructies kunnen in de hoofdtekst van het html-document zelf worden geschreven. Open hiervoor de style-tag in het servicegedeelte tussen de head-tags (openen en sluiten). Alle CSS-statements kunnen worden geschreven tussen het openen en sluiten van een bepaalde tag. Houd er alleen rekening mee dat in dit geval het paginagewicht zal toenemen, wat een negatief effect kan hebben op de tijd die nodig is om het voor de eindgebruiker te laden. Er moet ook worden opgemerkt dat in het geval van het specificeren van een achtergrondafbeelding, deze horizontaal, verticaal of langs twee assen tegelijk kan worden herhaald. Het background-repeat attribuut in CSS is hiervoor verantwoordelijk. De achtergrondafbeelding kan stevig worden vastgezet, ongeacht de aanwezigheid van een schuifbalk in het document. Om dit effect te bereiken, moet u background-attachment: fixed specificeren.

Stap 4

De achtergrond van een html-document kan worden gedaan met behulp van programmeertalen. U kunt html-instructies schrijven met JavaScript. De taalconstructie document.write is hiervoor geschikt. Als hetzelfde wordt uitgedrukt via de DOM, maakt de instructie document.body.style.backgroundColor = "red" de achtergrond van de pagina rood. Dit is hetzelfde als het rechtstreeks in CSS schrijven van het juiste attribuut.

Stap 5

De vorige instructies kunnen rechtstreeks in de code van een webpagina worden geschreven door een paar scripttags te maken tussen de openings- en sluitingshead-tags. Al deze instructies kunnen echter in een apart bestand met de extensie js worden geschreven, dat vervolgens aan de pagina kan worden gekoppeld.

Aanbevolen: