Hallo allemaal! Uw nederige dienaar neemt contact met u op met een portie nuttig en praktisch materiaal over het instellen van een achtergrond voor een website. Dit is het allereerste begin in de html-indeling en hier zal ik duidelijk met een voorbeeld demonstreren hoe je een mooie achtergrond kunt maken voor een site die zeker de internetgebruiker zal aantrekken en originaliteit zal toevoegen.

Als het je is opgevallen, gebruiken de meeste online zakenmensen een unieke achtergrond op hun verkoop- en abonnementspagina's. Vandaag zullen we de technische component van dit proces analyseren.

Dus eerst hebben we natuurlijk een foto nodig. Er is een hele goede site op het buitenlandse internet waar je er verschillende kunt downloaden foto's voor website-achtergrond. Er zijn er gewoon een groot aantal. De site heet Subtle Patterns.

Het verschijnt op de eerste plaats in de Google-zoekmachinelijst, dus ik raad het aan voor werk. U kunt ook een groot aantal andere sites vinden als u in een zoekmachine iets typt als 'achtergrondafbeeldingspatronen', 'achtergrondafbeelding voor site downloaden', enzovoort.

Als u geen problemen heeft met de Engelse taal, zult u deze zonder problemen begrijpen.

In dit artikel heb ik een onderwerp gekozen en het heet tweed. Je kunt het downloaden.

Zo ziet het eruit in een kleine versie op de website

Maak eerst een nieuw document in het programma

En voordat u het bewerkt, moet u het bijvoorbeeld onder een naam opslaan index.html en maak een map op de computer. U kunt bijvoorbeeld een map "Mijn site" maken en ons indexbestand (index.html) daarin plaatsen. Het is beter om een ​​map in het Engels aan te maken, zodat de browser niet in de war raakt en de site verkeerd weergeven.

Daarnaast moet je in de hoofdmap “mijn site” nog twee submappen maken, in de ene zullen we al onze afbeeldingen plaatsen en deze zal “afbeeldingen” heten, en de andere zullen we “CSS” noemen (cascading style werkbladen) en plaats het bestand daar stijl.css

Nu kunnen we in ons document werken. De volgende stap is het invoegen van een lege HTML-code, het zogenaamde hoofdframework van waaruit het allemaal begint. Je kunt het direct downloaden. Vervolgens kopiëren we alles uit dit bestand en brengen het over naar ons programmabestand. Het eindresultaat zou ongeveer als volgt moeten zijn

Naast de bestandsnaam ziet u een rode diskette. Als deze rood is, betekent dit dat het bestand niet is opgeslagen. Zorg ervoor dat u op de knop Opslaan klikt, zodat de diskette blauw wordt.

In de title-tag kun je de titel van het document wijzigen, je kunt er bijvoorbeeld ‘Mijn eerste webpagina’ van maken. En zorg ervoor dat uw pagina in codering wordt opgeslagen UTF-8

Anders, als er een andere codering is, bijvoorbeeld Windows-1251, wordt de tekst van het document in de browser weergegeven in hiërogliefen. U kunt de codering wijzigen in de sectie "Coders – Coderen in Utf-8 (zonder BOM)" op de programmawerkbalk.

En vergeet niet elke actie die we ondernemen op te slaan.

Laten we nu beginnen met het maken van de achtergrond in ons document. Ik zal meteen zeggen dat al onze acties bij het ontwerp van een webpagina zullen plaatsvinden met behulp van trapsgewijze stijlbladen genaamd CSS, dat wil zeggen dat we het frame in html zullen maken en het in een mooie stijl en uiterlijk zullen brengen met behulp van CSS.

Zo leer je jezelf de juiste volgorde van handelingen aan. Je moet stijlen niet rechtstreeks in het HTML-document behandelen; het is beter om ze in een apart document te plaatsen.

Om dit te doen, zullen we in ons Notepad++-programma een ander bestand maken en dit Style.css noemen en het opslaan in een nieuwe CSS-map, die zich in de gedeelde map “Mijn site” zal bevinden.

Geweldig! Om ervoor te zorgen dat onze browser de pagina correct weergeeft, moeten we het stylesheet aan ons html-document koppelen. Hier is hoe het gedaan is

We voeren direct de hele regel hierboven in. Met deze lijn verbinden we ons stylesheet.
Nu zullen we een achtergrondafbeelding voor onze body-tag definiëren via het stijlblad. Om dit te doen, creëren we de volgende structuur in het style.css-document (neem het gewoon en schrijf het in de programmacode)

Laat me het hier een beetje uitleggen. Het achtergrondkenmerk heeft veel waarden, waarvan er één background-repeat is, die verantwoordelijk is voor het uitrekken van onze achtergrondafbeelding voor het webdocument.

ACHTERGROND-HERHALING:

REPEAT //(horizontaal en verticaal uitrekken) REPEAT-X // (alleen horizontaal uitrekken) REPEAT-Y //(alleen verticaal uitrekken) NO-REPEAT //(herhaal de achtergrondafbeelding niet)

In ons geval repliceren we onze kleine foto zowel verticaal als horizontaal. Als gevolg hiervan is de hele pagina gevuld met onze afbeelding. Zo ziet het eruit in de browser:

Ook heb ik speciaal voor jou een selectie gemaakt van sites waar je een mooie achtergrond voor de site kunt downloaden

Veel beginnende lay-outontwerpers, die zich net verdiepen in de essentie van het maken van websites, vragen zich vaak af hoe ze van de achtergrond een afbeelding in HTML kunnen maken. En zelfs als sommige mensen deze taak kunnen uitvoeren, ontstaan ​​er nog steeds problemen bij het uitrekken van het beeld over de gehele breedte van de monitor. Tegelijkertijd wil ik dat de site in alle browsers gelijk wordt weergegeven, dus aan de cross-browservereiste moet worden voldaan. Je kunt de achtergrond op twee manieren instellen: met behulp van CSS-stijl. Iedereen kiest voor zichzelf de meest optimale optie. Natuurlijk is de CSS-stijl veel handiger, omdat de code in een apart bestand wordt opgeslagen en geen extra kolommen in beslag neemt in de hoofdtags van de site, maar laten we eerst eens kijken naar een eenvoudige methode om een ​​afbeelding in te stellen op de achtergrond van de site.

Basis HTML-tags voor het maken van een achtergrond

Laten we dus verder gaan met de vraag: achtergrond in html op het hele scherm. Om de site er mooi uit te laten zien, moet je een nogal belangrijk detail begrijpen: het is voldoende om gewoon een verloopachtergrond te maken of deze met een effen kleur te schilderen, maar als je een afbeelding in de achtergrond moet invoegen, zal deze niet uitrekken over de gehele breedte van de monitor. In eerste instantie moet u een afbeelding selecteren of zelf een ontwerp maken met de extensie waarin uw sitepagina wordt weergegeven. Pas nadat de achtergrondafbeelding gereed is, brengt u deze over naar een map met de naam "Afbeeldingen". Daarin slaan we alle afbeeldingen, animaties en andere grafische bestanden op die we gebruiken. Deze map zou zich in de hoofdmap van al uw HTML-bestanden moeten bevinden. Nu kunt u verder gaan met de code. Er zijn verschillende opties voor het schrijven van code waarmee de achtergrond in een afbeelding wordt gewijzigd.

1. Schrijf tag-attribuut.
2. Via CSS-stijl in HTML-code.
3. Schrijf de CSS-stijl in een apart bestand.

Hoe je van de achtergrond een afbeelding in HTML kunt maken, is aan jou, maar ik zou graag een paar woorden willen zeggen over hoe dit het meest optimaal zou zijn. De eerste methode, waarbij gebruik wordt gemaakt van het schrijven via een tag-attribuut, is al lang achterhaald. De tweede optie wordt in zeer zeldzame gevallen gebruikt, alleen omdat veel van dezelfde code wordt verkregen. En de derde optie is de meest voorkomende en effectieve. Hier zijn HTML-voorbeelden van tags:

1. De eerste manier om te schrijven is via het tag-attribuut (body) in het index.htm-bestand. Het is in de volgende vorm geschreven: (body background= "Folder_name/Image_name.extension")(/body). Dat wil zeggen, als we een afbeelding hebben met de naam "Afbeelding" en de JPG-extensie, en we de map "Afbeeldingen" hebben genoemd, dan zal de HTML-code-invoer er als volgt uitzien: (body background="Images/Picture.jpg") … (/lichaam) .
2. De tweede opnamemethode heeft invloed op de CSS-stijl, maar is geschreven in hetzelfde bestand genaamd index.htm. (body style = "achtergrond: url (""../Images/Picture.jpg")").
3. En de derde opnamemethode is gemaakt in twee bestanden. In een document met de naam index.htm wordt de volgende regel geschreven: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). En in het stijlbestand met de naam style.css schrijven we al: body (achtergrond: url(Images/Picture.jpg")).

We hebben besproken hoe je een achtergrondafbeelding in HTML kunt maken. Nu moet je begrijpen hoe je de afbeelding over de breedte van het hele scherm kunt uitrekken.

Manieren om een ​​achtergrondafbeelding uit te rekken tot de breedte van het venster

Laten we ons ons scherm in percentagevorm voorstellen. Het blijkt dat de volledige breedte en lengte van het scherm 100% x 100% zal zijn. We moeten de afbeelding tot deze breedte uitrekken. Laten we een regel toevoegen aan de afbeeldingsinvoer in het style.css-bestand, waardoor de afbeelding over de gehele breedte en lengte van de monitor wordt uitgerekt. Hoe is dit geschreven in CSS-stijl? Het is eenvoudig!

achtergrond: url(Afbeeldingen/Picture.jpg")

achtergrondgrootte: 100%; /* dit item is geschikt voor de meeste moderne browsers */

Dus we hebben ontdekt hoe we een afbeelding als achtergrond in HTML kunnen maken om het hele scherm te vullen. Er is ook een manier om in het index.htm-bestand te schrijven. Hoewel deze methode verouderd is, is het voor beginners noodzakelijk om deze te kennen en te begrijpen. In de (head)(style) div ( background-size: cover; ) (/style) (/head) tag betekent deze invoer dat we een speciaal blok voor de achtergrond toewijzen, dat over de gehele breedte van de achtergrond wordt gepositioneerd. raam. We hebben gekeken naar 2 manieren om van de achtergrond van een website een HTML-afbeelding te maken, zodat de afbeelding zich in elke moderne browser over de gehele breedte van het scherm uitstrekt.

Hoe maak je een vaste achtergrond?

Als u besluit een afbeelding te gebruiken als achtergrond voor een toekomstige webbron, hoeft u alleen maar uit te vinden hoe u deze bewegingloos kunt maken, zodat deze niet in de lengte uitrekt en het esthetische uiterlijk bederft. Het is gemakkelijk genoeg om deze kleine toevoeging met hulp te schrijven. U moet één zin toevoegen in het style.css-bestand na achtergrond: url(Images/Picture.jpg") fixed; of in plaats daarvan een aparte regel toevoegen na de puntkomma - position: fixed. Uw achtergrondafbeelding wordt dus bewegingloos. Als je door de inhoud op de site scrollt, zul je zien dat de tekstregels bewegen, maar de achtergrond blijft op zijn plaats. Je hebt dus op verschillende manieren geleerd hoe je van de achtergrond een afbeelding in HTML kunt maken.

Werken met een tabel in HTML

Veel onervaren webontwikkelaars begrijpen, wanneer ze worden geconfronteerd met tabellen en blokken, vaak niet hoe ze een afbeelding als tabelachtergrond in HTML moeten maken. Zoals alle CSS-stijlen is deze webprogrammeertaal vrij eenvoudig. En de oplossing voor een dergelijk probleem zou zijn om een ​​paar regels code te schrijven. U zou al moeten weten dat het schrijven van tabelrijen en -kolommen respectievelijk (tr) en (td) tags wordt genoemd. Om de tabelachtergrond in de vorm van een afbeelding te maken, moet u een eenvoudige zin toevoegen aan de tag (table), (tr) of (td) die een link naar de afbeelding aangeeft: achtergrond = URL van de afbeelding. Laten we voor de duidelijkheid een paar voorbeelden geven.

Tabellen met een afbeelding in plaats van een achtergrond: HTML-voorbeelden

Laten we een tabel van 2x3 tekenen en van de achtergrond een afbeelding maken die is opgeslagen in de map "Afbeeldingen": (tabelachtergrond = "Images/Picture.jpg") (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabel). Op deze manier wordt onze tafel in de achtergrond van de foto geschilderd.

Laten we nu dezelfde plaat tekenen met afmetingen 2x3, maar een afbeelding invoegen in de kolommen genummerd 1, 4, 5 en 6. (table)(tr)(td background = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td achtergrond = “Afbeeldingen/Picture.jpg”)4(/td) (td achtergrond = “Afbeeldingen/Picture.jpg”) 5( /td) (td achtergrond = “Afbeeldingen/Picture.jpg”)6(/td) (/tr) (/table). Na het bekijken zien we dat de achtergrond alleen verschijnt in de cellen waarin we ons hebben geregistreerd, en niet in de hele tabel.

Cross-browser compatibiliteit van de site

Er bestaat ook zoiets als cross-browsercompatibiliteit van een webbron. Dit betekent dat sitepagina's in verschillende typen en versies van browsers even correct worden weergegeven. In dit geval moet u de HTML-code en CSS-stijl aanpassen aan de vereiste browsers. Bovendien proberen veel webontwikkelaars in het moderne tijdperk van smartphone-ontwikkeling sites te maken die zijn aangepast voor zowel mobiele versies als computerweergaven.

Open uw HTML-paginabestand om te bewerken in de editor die u gebruikt. Om dit te doen, kunt u met de rechtermuisknop op het document klikken en het gedeelte 'Openen met' selecteren.

De structuur van een HTML-bestand bestaat uit een reeks descriptors van verschillende niveaus en doeleinden. De paginacode begint meestal met de tag . Hierna volgt meestal een sectie , die de paginatitel en CSS-code specificeert. Nadat de hendel is gesloten, begint de paginatekst

. Het attribuut voor het instellen van de pagina-achtergrondafbeelding is ingesteld als een extra achtergrondparameter voor deze tag. De code om de pagina-achtergrond te maken ziet er als volgt uit:

In dit geval kan het pad naar de afbeelding een URL zijn (beginnend met http://). De locatie kan worden ingesteld vanuit de hoofdmap (/root/folder/background.jpg) of relatief ten opzichte van de locatie van het HTML-document dat wordt bewerkt (bijvoorbeeld map/background.jpg).

Sla uw wijzigingen op en open de pagina in een browser. Om dit te doen, klikt u met de rechtermuisknop en selecteert u 'Openen met'. Geef in de weergegeven lijst de naam aan van het programma dat u gebruikt om pagina's op internet te bekijken. Als de achtergrondparameter correct is ingesteld, ziet u de eerder opgegeven achtergrondafbeelding. Als de afbeelding niet wordt weergegeven, controleer dan of het achtergrondkenmerk correct is opgegeven en het pad naar het achtergrondbestand.

bgcolor-parameter

Om de achtergrondkleur zonder afbeelding in te stellen, kunt u de bgcolor-richtlijn gebruiken. U kunt de Engelse kleurnaam opgeven als waarde voor dit attribuut, of de kleurwaarde gebruiken in het HTML-palet. Bijvoorbeeld:

Deze code geeft de pagina een blauwe achtergrond. Als u een kleurtint of een preciezere kleur wilt instellen, gebruikt u de HTML-paletwaarden:

In dit geval is #002902 de kleur die aan de pagina moet worden gegeven.

CSS-attributen

Je kunt de achtergrond ook instellen met behulp van CSS-code in de opties :

Met behulp van CSS kun je via background-image ook een achtergrondafbeelding voor de pagina opgeven:

Het gebruik van CSS en HTML levert dezelfde resultaten op, maar bij het instellen van paginaweergaveparameters verdient het de voorkeur om CSS te gebruiken.

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. Alleen 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.

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’)”

Sla uw bestand op.

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.