Met moderne browsers kunt u een willekeurig aantal achtergrondafbeeldingen aan een element toevoegen, waarbij u de parameters van elke achtergrond opsomt, gescheiden door komma's. Het is voldoende om de universele achtergrondeigenschap te gebruiken en er eerst een achtergrond voor op te geven en een tweede, gescheiden door een komma.

Hoe kan ik de achtergrond uitrekken over de volledige breedte van het venster?

Om de achtergrond te schalen, gebruikt u de eigenschap background-size; stelt u de waarde in op 100%, dan zal de achtergrond de gehele breedte van het browservenster beslaan. Voor oudere versies van browsers moet u specifieke eigenschappen met voorvoegsels gebruiken, zoals weergegeven in voorbeeld 1.

Hoe voeg ik een achtergrondafbeelding toe aan een webpagina?

Om een ​​achtergrondafbeelding aan een webpagina toe te voegen, stelt u het pad naar de afbeelding in binnen de URL-waarde van de achtergrondstijleigenschap, die op zijn beurt wordt toegevoegd aan de hoofdtekstselector.

Is het mogelijk om een ​​geanimeerde achtergrond te maken?

Animatie is een vrij krachtige techniek die elk document tot leven kan brengen. Het is dus niet verwonderlijk dat Flash-technologie, die interactieve tekenfilms aan webpagina's toevoegt, enorm populair is geworden. Het grafische GIF-formaat ondersteunt ook eenvoudige animatie door opeenvolgend van frame te veranderen. Met een afbeelding in dit formaat is het dus mogelijk om niet alleen individuele afbeeldingen te animeren, maar ook de achtergrond van een webpagina of een specifiek element.

Eerst moet u een geanimeerde afbeelding in GIF-formaat maken, waarvoor u Adobe Photoshop of een ander geschikt programma hiervoor kunt gebruiken. Er zijn ook bibliotheken met kant-en-klare geanimeerde bestanden die als achtergrondafbeelding kunnen worden gebruikt. Vervolgens wordt de afbeelding toegevoegd als achtergrond met behulp van de eigenschap achtergrondstijl, zoals weergegeven in voorbeeld 1.

Hoe plaats ik een achtergrondafbeelding in de rechteronderhoek van de pagina?

Om de positie van de achtergrondafbeelding op de pagina te bepalen, wordt de eigenschap background-position style gebruikt; deze stelt tegelijkertijd de horizontale en verticale coördinaten van de afbeelding in. Om het herhalen van een achtergrondafbeelding te annuleren, gebruikt u de eigenschap background-position met de waarde no-repeat.

Hoe kan ik voorkomen dat de achtergrond zich herhaalt?

Standaard wordt de achtergrondafbeelding horizontaal en verticaal herhaald, waardoor een mozaïek over het gehele veld van de webpagina ontstaat. Dit achtergrondgedrag is echter niet altijd vereist, vooral niet bij het plaatsen van een enkele afbeelding, dus het toevoegen van een niet-herhaalwaarde aan de achtergrondstijleigenschap kan helpen.

Hoe kan ik ervoor zorgen dat de achtergrond alleen verticaal wordt herhaald?

Herhaling van de achtergrond is doorgaans vereist om decoratieve lijnen of verlopen te maken die zijn gekoppeld aan de hoogte van een webpagina-element of venster. In dergelijke gevallen levert het verticaal herhalen van de achtergrond een consistent beeld op, ongeacht de grootte van de elementen. Pas in eerste instantie moet u ervoor zorgen dat de achtergrondafbeelding zonder naden wordt herhaald.

Bij het opzetten van een website is naast functionaliteit ook design erg belangrijk. Dit bepaalt de eigen stijl en vormgeving van een bepaald bedrijf of persoon voor wie de website wordt gemaakt. Het aanpassen van de achtergrondkleur en afbeelding is eenvoudig door de instructies in dit artikel te volgen.

Open uw HTML-bestand met Kladblok of een andere teksteditor die u gewend bent.

Laten we bijvoorbeeld een primitieve websitepagina nemen met een minimum aan tekst. U kunt uw bestand in elke browser openen.
Wijzig eerst de kleur van uw achtergrond, omdat mensen met een trage internetverbinding de achtergrondafbeelding van de site niet meteen kunnen zien. Terwijl de afbeelding wordt geladen, kunnen ze een tijdje alleen de kleur van uw site zien. Voer tag in

parameter bgcolor=”*****”, waarbij ***** de kleurcode is. U kunt de kleuren voor HTML in elke grafische editor achterhalen door de optie “voor web” te selecteren of op de website https://colorscheme.ru/color-names

U hoeft alleen maar een kleur in het cirkelpalet te selecteren en de intensiteit ervan binnen het vierkant toe te wijzen. Aan de rechterkant zie je twee codes voor html. Kopieer ze en plak ze in Kladblok.

Nadat je een kleur hebt geselecteerd en in de code hebt ingevoegd, kijk je of je alles goed hebt gedaan door de resulterende webpagina vanuit een browser te bekijken.

Nu kunt u beginnen met het invoegen van uw achtergrondafbeelding. Plaats voor meer gemak de gewenste afbeelding in de codemap. Geef hem een ​​naam in Latijnse letters.

Zoek nu de locatie van het bestand op door er met de rechtermuisknop op te klikken, 'Openen met' te selecteren en op een browser te klikken die op uw computer is geïnstalleerd.

Kopieer het adres uit de zoekbalk van uw browser. Nu in het label

• voer de regel in:

style=”achtergrondafbeelding: url(‘bestand:///C:/Gebruikers/FILE_PATH.jpg’)”

Controleer uw webpagina. U zult zien dat de achtergrond uw tekst heeft vervangen.

Houd er rekening mee dat voor gebruikers met een hogere schermresolutie uw afbeelding naar beneden en naar rechts wordt gedupliceerd. Het ziet er niet goed uit als de foto niet monochromatisch is. Er zijn speciale opdrachten om deze parameter te corrigeren.

• achtergrond-herhaling: “Waarde.” Opties voor uw waarde kunnen zijn: “repeat-x” – herhaalt uw achtergrondafbeelding zowel horizontaal als verticaal. “repeat-y” – herhaling alleen verticaal. “no-repeat” – het beeld wordt op zijn plaats bevroren en herhaalt zich niet. “spatie” – de hele pagina wordt gevuld met het maximale aantal exemplaren van de afbeelding, de buitenste exemplaren worden bijgesneden. “rond” – dezelfde optie, maar de randen van de afbeelding worden zorgvuldig geschaald;
• achtergrondbijlage: “Waarde.” Als u de tag ‘scroll’ vervangt in plaats van het woord Waarde, scrollt de afbeelding mee met de site. “vast” – de achtergrond blijft ongewijzigd tijdens het scrollen;
• achtergrondgrootte: Waarde Waarde2. Hier moeten de waarden een waarde in pixels aannemen. Bijvoorbeeld: 100px 200px. Naast pixels worden percentagewaarden geaccepteerd. Dit is een optie om de pagina te vullen met een afbeelding. Naast cijfers kunt u twee parameters invoeren: “contain” – vult de pagina met een afbeelding langs de lange zijde en “cover” – vult de pagina met een afbeelding langs de breedte.

Zodra u de basisbeginselen kent van het vullen van een pagina met achtergrond in HTML, bent u klaar om uw eerste website te maken.

Korte informatie

CSS-versies

Waarden

url De waarde is het pad naar het grafische bestand, dat is opgegeven in de url()-constructie. Het pad naar het bestand kan tussen aanhalingstekens (dubbel of enkel) of zonder aanhalingstekens worden geschreven.

geen Schakelt de achtergrondafbeelding voor het element uit.

HTML5 CSS2.1 IE Cr Op Sa Fx

achtergrondafbeelding

Objectmodel

document.getElementById("elementID ").style.backgroundImage

Browsers

Internet Explorer-versies tot en met 7.0 passen een achtergrond toe op de binnenrand van een element waarvoor de eigenschap hasLayout is ingesteld. Als het element geen hasLayout heeft, respecteert de eigenschap background-image de randen van het element, zoals gespecificeerd in de specificatie. Het verschil in weergave zal merkbaar zijn als de randen onderbroken of gestippeld zijn in plaats van effen.

Als de achtergrond is ingesteld voor een tabelrij (tag ), dan geven Chrome, Safari, iOS het niet weer zoals voorgeschreven door de specificatie, namelijk voor elke cel afzonderlijk. Terwijl de browser voor de hele rij een effen achtergrond zou moeten tonen. Voorbeeld 2 toont code die de fout aantoont.

geen Schakelt de achtergrondafbeelding voor het element uit.

1

2

3

Het resultaat van dit voorbeeld in de Chrome-browser wordt getoond in Fig. 1. Internet Explorer-, Opera- en Firefox-browsers geven de achtergrond voor de regel correct weer (Fig. 2).

Rijst. 1. Herhaal de achtergrond voor elke cel

Rijst. 2. Achtergrond voor de hele regel

Invoering

Als je nog niet weet hoe je een achtergrond op een website installeert, is het handig om dit artikel te lezen. Hieruit leert u hoe u een afbeelding als achtergrondafbeelding kunt instellen, parameters voor de weergave ervan kunt instellen of eenvoudigweg de achtergrond met een bepaalde kleur kunt vullen.

CSS om ons te helpen

Zoals je misschien al geraden hebt, zullen we de achtergrond instellen door CSS-stijlen aan het HTML-object toe te voegen. De universele achtergrondeigenschap is verantwoordelijk voor het weergeven van de achtergrond van een element. Als u een achtergrond aan een specifiek element wilt toevoegen, voeg dan CSS-eigenschappen toe aan de id of klasse ervan. Indien voor de hele site, dan naar de body-tag of de identificatie (klasse) van de container (wrapper), als deze de body overlapt. In dit artikel gaan we in de voorbeelden werken met het body-element.

Vul kleur

Laten we beginnen met het eenvoudigste: vullen met een bepaalde kleur. Om dit te doen, hoeven we alleen de kleurcode en de CSS-eigenschap achtergrondkleur te kennen.

Body ( achtergrondkleur: #000; /* Vul de achtergrond met zwart */ )

Deze code zorgt voor een effen zwarte achtergrond voor uw site. Elke andere kleur kan als achtergrondkleur worden geselecteerd door de code ervan te wijzigen.

Als u een achtergrondvulling toepast op een specifiek element, bijvoorbeeld een kop (h1-h6), een alinea (p), enz., zorg er dan voor dat de tekstkleur niet opgaat in de achtergrond en de leesbaarheid niet verliest. Gebruik de eigenschap color om de kleur van de tekst te wijzigen.

P ( achtergrondkleur: #000; /* Vul de achtergrond met zwart */ kleur: #fff; /* Witte tekst voor een zwarte achtergrond */ )

Achtergrondafbeelding

De achtergrondafbeelding voor een element wordt ingesteld met behulp van de eigenschap background-image, die het pad naar het grafische bestand als waarde gebruikt. Het pad naar het bestand wordt opgegeven met behulp van de url( ), Waar Dit is het pad naar het grafische bestand. Als u eenvoudigweg de bestandsnaam opgeeft, bijvoorbeeld url(achtergrond.png), dan moet de afbeelding in dit geval in dezelfde map worden opgeslagen als het CSS-bestand.

Het wordt aanbevolen om voor alle afbeeldingen een aparte map te maken en het absolute pad naar het bestand op te geven, d.w.z. vanuit de hoofdmap. Dit verbetert de structuur van uw site en elimineert problemen als u besluit de locatie van het CSS-bestand zelf te wijzigen.

Body ( achtergrondafbeelding: url(/images/background.png); /* Absoluut pad naar de achtergrondafbeelding background.png */ )

Als er een achtergrondafbeelding wordt gebruikt, wordt aanbevolen om tegelijkertijd een kleurvulling op te geven (met de eigenschap background-color). In dit geval, als de afbeelding niet wordt geladen (de afbeelding is om de een of andere reden niet beschikbaar; de gebruiker heeft de weergave van afbeeldingen uitgeschakeld), of met vertraging wordt geladen (de afbeelding wordt volledig later geladen dan de pagina), wordt de achtergrond opgevuld wordt weergegeven in plaats van de afbeelding of totdat deze volledig is geladen.

Body ( achtergrondafbeelding: url(/images/background.png); /* Absoluut pad naar de achtergrondafbeelding background.png */ achtergrondkleur: #ab11cf; /* Vul de achtergrond met een specifieke kleur */ )

Deze twee eigenschappen uit het bovenstaande voorbeeld kunnen worden gecombineerd tot één met behulp van de generieke achtergrondeigenschap.

Body ( achtergrond: #ab11cf url(/images/background.png); /* Vulkleur en pad naar de achtergrondafbeelding */ )

achtergrond eigendom

Met de algemene achtergrondeigenschap kunt u alle weergaveopties voor de achtergrondafbeelding op één regel instellen. Laten we eens kijken naar de beschikbare opties.

Achtergrond: | erven

De volgorde van de waarden kan willekeurig zijn en als er geen eigenschap is opgegeven, wordt de standaardwaarde gebruikt.

achtergrondbijlage

Deze eigenschap bepaalt of de achtergrondafbeelding meeschuift met de inhoud van het element. Als u de afbeelding wilt corrigeren, gebruikt u de waarde vast. In dit geval blijft de afbeelding bewegingloos tijdens het scrollen door de pagina-inhoud. Als u wilt dat de afbeelding met de inhoud van de site meebeweegt, gebruikt u de scrollwaarde. Standaard is dit ingesteld op scrollen.

Body ( achtergrondafbeelding: url(/images/background.png); /* Absoluut pad naar de achtergrondafbeelding background.png */ achtergrondbijlage: vast; /* Afbeelding vast */ achtergrondkleur: #ab11cf; /* Achtergrond vullen met een specifieke kleur */ )

Equivalent:

Body ( achtergrond: #ab11cf url(/images/background.png) vast; /* Vulkleur en pad naar de vaste achtergrondafbeelding */ )

achtergrond-positie

Als er een achtergrondafbeelding is opgegeven, bepaalt deze eigenschap de beginpositie ervan. Heeft twee waarden gescheiden door een spatie: horizontale positie en verticale positie. Waarden kunnen worden ingesteld met behulp van trefwoorden: links rechts boven onder midden. De volgorde waarin ze verschijnen is niet belangrijk. Als de waarden zijn opgegeven in percentages, pixels, etc., wordt eerst de horizontale waarde aangegeven en vervolgens de verticale waarde. Standaard is de positie ingesteld op de linkerbovenhoek (linksboven).

achtergrond-herhaling

Bepaalt hoe de achtergrondafbeelding wordt herhaald. Het kan alleen horizontaal worden herhaald (repeat-x), of alleen verticaal (repeat-y), of tegelijkertijd horizontaal en verticaal (repeat), of helemaal zonder herhalingen (no-repeat). De standaardwaarde is herhalen.

erven

Wordt gebruikt om expliciet de overerving van eigenschappen van een ouderelement aan te geven.

17.10.2015

Nog niet

Hallo allemaal!
Laten we doorgaan met het leren van de basisprincipes van HTML.
In deze les vertel ik het je en laat ik voorbeelden zien hoe je een achtergrond maakt van een kleur of afbeelding op een HTML-pagina.
Het is heel eenvoudig!
Laten we beginnen met kleur!
Ik denk dat je het niet gemist hebt, waar ik je vertelde hoe je de kleur van de tekst kunt veranderen en aan het einde van het artikel gaf ik codes voor verschillende kleuren en tinten. Waarom heb ik je aan deze les herinnerd? Ja, want er is een tafel met kant-en-klare kleurcodes, neem deze mee en oefen ze meteen in deze les.
Dus, hoe maak je een achtergrondkleur in HTML...

Achtergrondkleur in HTML

De standaardachtergrondkleur in een HTML-document is wit. Hoe de kleur naar wens instellen?
Het attribuut “bgcolor” zal ons hierbij helpen. Om over de achtergrond te schilderen, voegt u dit attribuut toe aan de ‘body’-tag:

Of zoals dit:

Hier is de volledige HTML-code:

De paginatekst is groen en de achtergrond is zwart.

Het resultaat zal als volgt zijn:

Als je een achtergrond van een afbeelding wilt maken, voeg dan het attribuut “background” toe aan de tag “body”:

Vul een willekeurige afbeelding in waar uw webpagina zich bevindt (in mijn voorbeeld heet de pagina “fon” met de extensie “.gif”):

Hier is de volledige HTML-code:

Het resultaat zal als volgt zijn:

Als de achtergrondafbeelding zich in de map Afbeeldingen of een andere map bevindt, ziet deze er als volgt uit:

Hier is de volledige HTML-code:

Paginatekst op een mooie achtergrond.

Dat is alles voor vandaag! Ik denk dat de les niet moeilijk was en dat je alles begreep. Als je vragen hebt, schrijf dan in de reacties.
Ik zie je graag terug bij de volgende lessen.

Vorig bericht
Volgende invoer