Eerste tekst

Tweede tekst

In html is de achtergrond voor de site niet gespecificeerd; deze is geschreven met behulp van CSS-stijlen, maar dit is slechts een theoretische formaliteit. Laten we nu eens kijken hoe we deze achtergrond kunnen bepalen.

Achtergrond voor een website of een los blok

Omdat we een CSS-bestand nodig hebben om dit doel te bereiken, moeten we het maken en verbinden met HTML. Hierover wordt geschreven in. Hierna kunt u aan de slag. Eerst moet u beslissen waar u de achtergrond op wilt instellen. Als de hele pagina als geheel is, dan kun je het als volgt doen:

Lichaam (achtergrondkleur: wit; )

Dat wil zeggen dat we toegang hebben tot de body-tag, die onze hele pagina vertegenwoordigt. Gebruik de eigenschap background-color om de achtergrondkleur in te stellen. Maar wat als u de achtergrond op een patroon moet instellen in plaats van op een effen kleur? Dan moet je het zo schrijven:

Body( Achtergrondafbeelding: url(pad naar de afbeelding. afbeeldingsextensie) )

Voor de duidelijkheid stel ik voor om alles in meer detail te bekijken aan de hand van een voorbeeld. Hiervoor gebruik ik deze afbeelding:

Bijvoorbeeld achtergrondafbeelding: url(comp.png) . In dit voorbeeld stellen we een achtergrondafbeelding in met de naam comp (zo noemde ik het) png-formaat, die zich in dezelfde map bevindt als het CSS-bestand.
In html zal ik een aangepast blok met specifieke afmetingen maken om de werking van CSS-eigenschappen te demonstreren.

En hier zijn de stijlen ervoor:

#ct( Achtergrondafbeelding: url(comp.png); breedte: 600px; hoogte: 400px; )

Dit is wat we hebben:

Waarom is dit zo? Feit is dat de browser de afbeelding standaard zo vaak herhaalt om het blok volledig te vullen. Soms is dit nodig, bijvoorbeeld bij het gebruik van naadloze patronen, maar in ons geval zou er één afbeelding moeten zijn. Gelukkig kan dit heel eenvoudig worden beheerd.

Herhaal achtergrond

Als u een afbeelding als achtergrond heeft, wordt deze standaard horizontaal en verticaal herhaald om de gehele ruimte van de pagina te vullen. Om dit te verwijderen, gebruikt u de eigenschap background-repeat en de bijbehorende no-repeat-waarde. Er zijn ook de volgende waarden:

• Herhaal-x – herhaal alleen horizontaal
• Repeat-y – alleen verticaal

Laten we toevoegen aan de eigenschappen van onze grafische achtergrond:

Achtergrondherhaling: geen herhaling;

Positie

De eigenschap background-position bepaalt de locatie waar de afbeelding wordt geplaatst. Hier worden twee waarden gespecificeerd: horizontaal en verticaal. Voorbeelden: achtergrondpositie: rechtsonder – positie in de rechter benedenhoek, linksboven – in de onderste bovenhoek (en dus standaard), 250px 500px – offset vanaf links bovenste hoek naar rechts met 250 pixels en naar beneden met 500.

Laten we de voorbeelden eens beter bekijken:

Achtergrondpositie: rechtsboven;

De afbeelding wordt naar de rechterbovenhoek verplaatst. Ik heb het blok ook een gele achtergrond gegeven, zodat de randen zichtbaar waren.

achtergrondpositie: 50% 50%;

Het beeld verscheen precies gecentreerd in het blok. Ja, ja, dit is ook mogelijk dankzij de procentuele registratie van de positie.

achtergrondpositie: 70% 20%;

De achtergrond wordt horizontaal 70% en verticaal 20% verschoven.

Het is ook toegestaan ​​om een ​​negatieve positiewaarde in pixels op te geven. Dit kan bijvoorbeeld worden gedaan als u een grote sprite-afbeelding gebruikt en deze in een blok moet plaatsen het juiste deel deze spriet.

Vergrendel de achtergrond

Ik hou ook erg van een eigenschap genaamd background-attachment . Het heeft slechts twee waarden en de eerste is de standaard (scroll). Dit betekent dat terwijl u door de pagina scrolt, de achtergrond ook meeschuift, en als u een afbeelding zonder herhaling gebruikt, zal deze uiteindelijk opraken en gewoon een effen kleur hebben.

Om dit te voorkomen, is achtergrondbijlage: vast gespecificeerd en nu is onze achtergrond veilig op zijn plaats bevestigd. Dit kan worden vergeleken met het definiëren van een vaste positie voor een blok, zodat het niet van de pagina verdwijnt als er doorheen wordt gescrolld.

Een verkorte versie van al dit goeds

We hebben veel eigenschappen besproken waarmee je een achtergrond kunt creëren, maar als je ze allemaal gebruikt, krijg je een omslachtige opname. Er zijn zeer elegante oplossing. Met de eigenschap background kunt u een spatie gescheiden schrijven vereiste instellingen in deze volgorde:
Achtergrond: kleurenafbeelding herhaal pinpositie;
En nu kan alles als volgt worden geschreven:

Achtergrond: gele url (comp.png) niet-herhaling 20% ​​100px;

Als een eigenschap niet hoeft te worden gedefinieerd, wordt deze eenvoudigweg weggelaten (in ons geval hebben we geen achtergrondbijlage geschreven).

Veel achtergronden

Wat als u meerdere achtergrondafbeeldingen nodig heeft? Het gebeurt, wat kun je doen? Tegenwoordig ondersteunt CSS deze functie. Laten we het ook proberen. Laten we dit pictogram nemen

Ik noemde het laptop.

En hier is de code om de multiphone in te voegen:

Achtergrond: url(comp.png) niet-herhaling 20% ​​100px, url(laptop.png) niet-herhaling 50% 50%; achtergrondkleur: geel;

Zoals u kunt zien, hoeft u alleen maar een komma na de eerste afbeelding te plaatsen en de instellingen voor de tweede in te voeren. In dit geval is het beter om afzonderlijk een effen kleur in te stellen.

Op dezelfde manier kunt u zoveel meer foto's maken als u wilt, maar overdrijf het niet: te veel afbeeldingen is niet erg goed.

Hier wil ik dit artikel beëindigen. Je kunt nog veel meer interessante dingen doen met de achtergrond, ik zal proberen er in de toekomst over te schrijven (en ik heb bijvoorbeeld al iets geschreven). Veel succes met uw verkenning van dit pand.

Hallo allemaal! Uw nederige dienaar heeft contact met u met een portie nuttige en praktisch materiaal over het onderwerp hoe je een achtergrond voor een website instelt. Dit is het allereerste begin van de HTML-indeling en hier zal ik duidelijk met een voorbeeld laten zien hoe u dit moet doen mooie achtergrond voor een site die de internetgebruiker zeker zal boeien en originaliteit zal toevoegen.

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

Dus eerst hebben we natuurlijk een foto nodig. IN buitenlands internet er is een hele goede site waar je verschillende gratis 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. Ook kun je vinden groot aantal andere sites 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

Eerst creëren wij 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 onze indexbestand(index.html).Het is beter om een ​​map aan te maken Engels, zodat er geen verwarring in de browser en onjuiste weergave van de site ontstaat.

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. In de volgende stap moeten we de blanco invoegen html-code, het zogenaamde basisframe 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 titel tag u kunt de naam van het document wijzigen, u 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 op het gebied van het ontwerp van een webpagina zullen plaatsvinden met behulp van trapsgewijze stijlbladen, CSS genaamd, dat wil zeggen dat we het frame in html zullen maken en het naar mooie stijl en laten we ernaar kijken met behulp van CSS.

Op deze manier raakt u gewend aan de juiste volgorde van handelingen. Ga er niet meteen in staan html-document Als je niet met stijlen wilt omgaan, kun je ze beter in een apart document plaatsen.

Om dit in onze Kladblok-programma++ laten we een ander bestand maken en het Style.css noemen en het opslaan in een nieuw bestand css-map, die binnen zal zijn gedeelde map"Mijn website"

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 gaan we via het stijlblad een achtergrondafbeelding voor onze body-tag definiëren. Om dit te doen, maken we style.css in het document volgende structuur(Neem het gewoon en schrijf het in de programmacode)

Laat me het hier een beetje uitleggen. Het achtergrondattribuut 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

Met moderne browsers kunt u iets aan een element toevoegen willekeurig nummer achtergrondafbeeldingen, met een lijst van de parameters van elke achtergrond, gescheiden door komma's. Het is voldoende om de universele achtergrondeigenschap te gebruiken en er eerst een en de tweede achtergrond voor op te geven, 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?

Als u een achtergrondafbeelding aan een webpagina wilt toevoegen, stelt u het pad naar de afbeelding in binnen de stijl-URL-waarde achtergrond eigenschappen, die op zijn beurt wordt toegevoegd aan de bodyselector.

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

Animatie is voldoende sterke ontvangst, in staat om elk document tot leven te brengen, dus het is niet verrassend dat het enorm populair is geworden Flash-technologie, waarmee cartoons aan webpagina's worden toegevoegd, die ook interactief zijn. Grafisch formaat GIF ondersteunt ook eenvoudige animatie door opeenvolgende verandering van frames. Met een afbeelding in dit formaat is het dus niet alleen mogelijk om te animeren individuele foto's, maar ook de achtergrond van een webpagina of een specifiek element.

Eerst moet je een geanimeerde afbeelding maken GIF-formaat waarvoor u het programma kunt gebruiken Adobe Photoshop of ander geschikt voor dit doel. 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 in het geval van een enkele afbeelding hulp zal komen een niet-herhaalwaarde toegevoegd aan de achtergrondstijleigenschap.

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

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

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 het meeste voor zichzelf beste optie. Zeker, 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 eerst zullen we een eenvoudige methode overwegen om een ​​afbeelding op de achtergrond van de site te installeren.

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 één ding begrijpen: belangrijk detail: gemakkelijk genoeg om te doen verloop achtergrond of schilder het met een effen kleur, maar als u een afbeelding op de achtergrond moet invoegen, strekt deze zich niet over de gehele breedte van de monitor uit. 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 gebruikte afbeeldingen, animaties en andere op grafische bestanden. Deze map zou zich in de hoofdmap moeten bevinden met al uw html-bestanden. 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 HTML-voorbeelden 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 JPG-extensie, en we noemden de map “Afbeeldingen”, dan ziet de HTML-code-invoer er als volgt uit: (body background="Images/Picture.jpg")… (/body).
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 mensen 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 een ​​website-achtergrond te maken html-afbeelding zodat het beeld 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 onbeweeglijk 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") vast; of in plaats daarvan een aparte regel toevoegen na de puntkomma - positie: vast. Dus uw achtergrondafbeelding zal bewegingloos worden. Terwijl u door de inhoud op de site bladert, zult u dat zien tekstreeksen bewegen, maar de achtergrond blijft op zijn plaats. Je hebt dus op verschillende manieren geleerd hoe je een achtergrondafbeelding 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 de sitepagina's even correct worden weergegeven verschillende soorten en browserversies. In dit geval moet u de HTML-code en CSS-stijl aanpassen vereiste browsers. Bovendien, binnen moderne tijden ontwikkeling van smartphones, veel webontwikkelaars proberen websites te maken die daarvoor zijn aangepast mobiele versies en onder een computerweergave.