Achtergrondafbeelding van de html-pagina. Achtergrondafbeelding

Vrijwel elke populaire website heeft een mooie uitstraling. Een belangrijk onderdeel van website-ontwerp is de achtergrond, ook wel achtergrond genoemd, die ieder van ons kan maken of wijzigen. In dit artikel vertel ik je hoe je een achtergrond op een website zet.

Een nieuwe achtergrond maken voor websites

Om de taak te voltooien, kunt u een van de 4 methoden gebruiken:

• 1. Achtergrond met één kleur
• 2. Achtergrond met textuur
• 3. Achtergrond met verloop
• 4. Achtergrond van een grote afbeelding

Maak een achtergrond met één kleur

Om de achtergrond van de site, die uit één kleur bestaat, te maken of te wijzigen, moet je naar het bestand gaan stijl.css, waarin de waarde wordt gevonden - body (deze is verantwoordelijk voor het hoofdgedeelte van de site). Nu moet u de achtergrondkleurfunctie registreren als deze niet bestond en de kleurcode aangeven. In het geval dat u een witte achtergrond voor een website moet maken, moet u de volgende code schrijven:

achtergrondkleur: #83C5E9; (blauwe achtergrond, zoals in het voorbeeld)

Een volledige lijst met kleuren vindt u op de website - (STM). Om de kleur te veranderen, wijzigt u eenvoudigweg de waarde na de dubbele punt en geniet van uw inspanningen.

Een achtergrond maken met behulp van textuur

Deze methode is de laatste tijd vooral populair, omdat je hiermee een prachtige achtergrond voor de site kunt creëren. Texturen kunnen eenvoudig maar erg mooi zijn en daarom worden ze vaak gebruikt. Om een ​​texture aan te sluiten, moet u deze uploaden naar de afbeeldingenmap op de hosting waar uw site is geïnstalleerd. Hierna moet je de volgende code schrijven:

achtergrondkleur: #537759;

achtergrondafbeelding: url(images/pattern.png);

Deze code bevat een bekende parameter voor het behouden van de kleur (deze is groen) en een element dat verantwoordelijk is voor het verbinden van de groene textuur.

Een achtergrond maken met behulp van een verloop

Elke afbeelding die met css-functies is verbonden, kan zowel horizontaal als verticaal (langs de assen) worden herhaald X En Y). Met deze mogelijkheid kunnen we met onze eigen handen elke eenvoudige achtergrond voor de site maken. Om dit te doen, moet u een verloop van 1 megapixel breed maken (zie onderstaande afbeelding), deze opslaan als afbeelding en uploaden naar uw hosting. Hierna kunt u de benodigde code schrijven, namelijk:

achtergrondkleur: #83C5E9;

achtergrondafbeelding: url(images/gradient.jpg);

achtergrondherhaling: herhaal-x;

In deze set is er, in volgorde van prioriteit, een functie die verantwoordelijk is voor de achtergrondkleur, die we gebruiken voor herverzekeringen. Hierna volgt een parameter die verantwoordelijk is voor het verbinden van de gradiënt en tenslotte een functie die verantwoordelijk is voor het herhalen van de gradiënt langs de X-as.

Een grote afbeelding gebruiken voor de websiteachtergrond

Deze methode is de tweede meest populaire, omdat je verschillende afbeeldingen kunt gebruiken om een ​​achtergrond te creëren. Om deze methode te implementeren, hoeft u alleen maar een grote afbeelding te uploaden naar de afbeeldingenmap van de site en de volgende code in te voeren:

achtergrondkleur: #000000;

achtergrondafbeelding: url(afbeeldingen/afbeeldingstitel.jpg);

achtergrondpositie: midden boven;

achtergrondherhaling: geen herhaling;

Als alles duidelijk is met de eerste twee parameters, moeten de laatste twee worden afgedekt. Met de derde functie kunt u de afbeelding in het midden van de site fixeren, en de laatste parameter blokkeert de herhaling ervan door de gehele paginastructuur.

De achtergrond op ucoz-websites wijzigen

Deze methoden voor het maken van een achtergrond voor een site kunnen worden gebruikt op verschillende contentmanagementsystemen, maar niet op sites - ucoz. Om de achtergrond voor de ucoz-website te wijzigen, moet u naar het sitecontrolepaneel gaan, ga naar "Design Management", en dan binnen "Sjablonen bewerken".

Nu moet je het Style Sheet (CSS) openen en de regel zoeken "lichaam" en parameter "achtergrond". Hierna moet u de link kopiëren, in uw internetbrowser plakken en heeft u toegang tot de afbeelding die op de achtergrond stond.

Om een ​​nieuwe achtergrond te gebruiken, hoeft u deze alleen maar naar Bestandsbeheer te uploaden. Zorg er tegelijkertijd voor dat de naam van de nieuwe achtergrondafbeelding dezelfde is als vóór de wijziging. Sla uw werk op en ga naar de website om het uitgevoerde werk te bekijken.

De achtergrond van de site wijzigen naar HTML

Als u de achtergrond op een HTML-site wilt maken met behulp van een afbeelding, voert u eenvoudigweg de regel in de code in:

En als u de achtergrond van de site in kleur wilt maken, moet de lijn er als volgt uitzien:

Hiermee is ons verhaal afgerond. Nu weet je hoe je een achtergrond voor een website kunt maken. Fijne projecten!

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 eerst zullen we een eenvoudige methode overwegen om een ​​afbeelding op de achtergrond te zetten 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 makkelijk!

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 selecteren, dat over de gehele breedte van het 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 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") 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.

26.11.2016 04.02.2018

In deze les leert u hoe u dat moet doen hoe u de achtergrond van een foto verwijdert en een nieuwe invoegt in Photoshop. Ik zal een vrij eenvoudige, correcte en snelle manier beschrijven om een ​​afbeelding te vervangen.

Vaak zijn we op een foto niet tevreden met de achtergrond waarin we ons bevinden en bestaat de verleiding om iets interessants in te voegen. Dit kan eenvoudig worden gedaan met behulp van Photoshop. Voornaamst achtergrondvervanging moet efficiënt worden uitgevoerd en zorgvuldig zodat de nieuwe achtergrond harmonieus in de foto past. Daarom moet u de achtergrond die u wilt invoegen zorgvuldig selecteren, zodat deze zo goed mogelijk in de compositie past en qua kleur vergelijkbaar is, zodat u later niet veel kleurcorrectie hoeft uit te voeren.

Lesplan

• Open in Photoshop de foto waarop de achtergrond wordt vervangen en open de foto van de nieuwe achtergrond
• Knip de oude achtergrond uit de foto
• Kopieer de nieuwe achtergrond en plak deze in de foto
• Pas kleuren en niveaus aan

Bekijk het resultaat van het werk na het vervangen van de achtergrond. Voor en na foto.

Voorbereiden om uit te voeren

Als je op dezelfde foto's wilt oefenen, download ze dan:

U kunt ook uw eigen foto's gebruiken of andere op internet zoeken.

Stap 1

Open de foto's in Photoshop. Ga naar de foto waarop we de achtergrond gaan vervangen.

Stap 2

Maak een kopie van de laag.

Omdat de fotolaag standaard is vergrendeld tegen bewerken, moet u er een kopie van maken. Selecteer de laag en klik CTRL+J op het toetsenbord om een ​​kopie te maken. U kunt de oude laag verbergen door op het oogpictogram te klikken.

Laat de oude laag een reserve zijn voor het geval dat, zodat u er in geval van een fout naar kunt terugkeren.

Stap 3

Nu moeten we mensen selecteren, namelijk het verliefde stel op de foto.

We zullen het hulpmiddel gebruiken Snelle selectie.

Het principe van de werking ervan is eenvoudig. Je gebruikt een penseel om aan te geven waar je moet selecteren en Photoshop maakt de selectie.

Begin met het benadrukken van mensen. Voor het gemak kunt u inzoomen (houd ALT op uw toetsenbord ingedrukt en scroll met uw muiswiel).

Als je een complexere foto hebt en deze niet kunt uitlichten, pas dan alle kennis toe.

Advies: Om de selectie van objecten gelijkmatiger te maken, moet u de penseelgrootte wijzigen terwijl u werkt.

Uiteindelijk moet je een paar volledig uitlichten.

Stap 4

Nu verwijderen we de oude achtergrond. Om dit te doen, keert u de gemaakte selectie om door te klikken SHIFT+CTRL+I(of menukaart Selecteer - Omkeren). Hierna wordt alles rondom mensen of de achtergrond geselecteerd. Klik Del (Verwijderen) op het toetsenbord om de achtergrond te verwijderen.

Nu verschijnen de mensen op een transparante achtergrond.

Stap 5

Voeg een nieuwe achtergrond in. Open een afbeelding met een nieuwe achtergrond. Selecteer het hele gebied van de afbeelding, u kunt erop klikken CTRL+A en kopieer door erop te klikken CTRL+C.

Ga naar de foto.

Maak een nieuwe laag onder de foto. SHIFT+CTRL+N of klik eenvoudig op het pictogram voor het maken van een laag.

Nu de nieuwe laag is gemaakt, klikt u op CTRL+V om een ​​nieuwe achtergrondafbeelding in te voegen.

De achtergrondafbeelding is ingevoegd, maar is mogelijk te groot in verhouding tot de foto.

Klik dus CTRL+T om de schaal aan te passen en de afbeelding te verkleinen tot de gewenste grootte.

Het eindresultaat zal ongeveer zo zijn:

Stap 6

Alles is in orde, maar we moeten de kleurdiepte van de mensen, om zo te zeggen, een beetje aanpassen aan de nieuwe achtergrond.

Om dit te doen, selecteert u de laag met mensen en klikt u op CTRL+L om de functie aan te roepen Niveaus.

Maak de afbeelding iets donkerder.

Nu ziet de foto met de nieuwe achtergrond er realistischer uit:

Dit voltooit onze manipulaties van het invoegen van een nieuwe achtergrond. Zoals u kunt zien, is hier niets ingewikkelds aan en Photoshop helpt u dit binnen 5-10 minuten te doen met hard werken.

Als u problemen ondervindt, stel dan uw vragen in de opmerkingen, wij helpen u in elk afzonderlijk geval.

In dit bericht vertel ik het je zoals gewoonlijk stel de achtergrond van de site in gebruik makend van HTML code.

Ik zal je ook een uitstekende buitenlandse service laten zien voor het selecteren van naadloze achtergronden.
Tegenwoordig worden site-instellingen eenvoudiger en handiger gemaakt via CMS-consoles zoals WordPress.
Het kan nodig zijn om de templates van verkoopwebsites te wijzigen, dit artikel helpt hierbij.

Als je niet weet wat het is HTML, dan kan dit over het algemeen de taal van sites worden genoemd, of een reeks regels waarmee sites worden gegenereerd.

U ziet bijvoorbeeld een afbeelding op een website, maar in de HTML-code van de pagina kan deze er als volgt uitzien:

Stel een effen kleur in voor de pagina-achtergrond.

Om te installeren effen kleur achtergrond, moet taggen attribuut toevoegen bgkleur.

< html >
< head >
< title >Pagina titel.

< body bgcolor = "#ffcc00" >

U kunt deze code in een tekstbestand plakken en opslaan met de extensie .html. Open het vervolgens met een willekeurige browser en bekijk het resultaat.

Zoals u waarschijnlijk al geraden heeft, wordt de achtergrondkleur weergegeven vanwege de kleurcode in het attribuut bgcolor= "waarde", die u kunt vinden via deze link.

Een afbeelding instellen op de achtergrond van een HTML-pagina.

Om te afbeelding op achtergrond zetten, kunt u het attribuut gebruiken achtergrond in het etiket .

< html >
< head >
< title >Pagina titel.

< body background = "http://сайт/images/mlmsecret.jpg" >Hallo. Dit is mijn eerste pagina.

Het is u wellicht opgevallen dat het attribuut achtergrond is gelijk aan het pad van het bestand dat als achtergrond wordt gebruikt.

Om snel de achtergrond of een afbeelding op de pagina te wijzigen, geeft u eenvoudigweg het nieuwe pad naar uw bestand op met behulp van een teksteditor.

Om het vorige pad te achterhalen, moet u naar de pagina met de afbeelding gaan, met de rechtermuisknop op de afbeelding klikken en op 'Afbeeldings-URL kopiëren' klikken. Zo zie je de naam van de afbeelding/achtergrond. Vervolgens kunt u eenvoudig de oude afbeelding vervangen door uw eigen afbeelding, met dezelfde bestandsnaam.

Dit waren de eenvoudigste basisprincipes voor het opzetten achtergrond in html, nu komt het interessante deel. 🙂

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 cartoons aan webpagina's toevoegt, en bovendien interactieve, 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-herhalingswaarde aan de eigenschap Achtergrondstijl kan helpen.

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.