Hoe maak je een beeldachtergrond in HTML en CSS. 3 eenvoudige manieren

Stelt de kleur van het achterplan uit het palet in. De kleur van de erfgenaam valt altijd samen met de kleur van het voorouderelement.
Groeten. In dit artikel wil ik ongeveer drie manieren vertellen om een ​​afbeelding als achtergrond van de volledige pagina te plaatsen met alleen HTML + CSS (zonder JS) te gebruiken.

Groeten. In dit artikel wil ik ongeveer drie manieren vertellen om een ​​afbeelding als achtergrond van de volledige pagina te plaatsen met alleen HTML + CSS (zonder JS) te gebruiken.

Dus de vereisten voor de achtergrondafbeelding die we zijn als volgt:

  • 100% breedte en pagina's Hoogte bedekt
  • De achtergrondschaal indien nodig (achtergrond is uitgerekt of gecomprimeerd, afhankelijk van de grootte van het scherm)
  • Plak de verhoudingen van de foto's (beeldverhouding)
  • Afbeelding gecentreerd op de pagina
  • De achtergrond veroorzaakt geen scrolls
  • De oplossing is maximaal kruisbrawser
  • Geen enkele andere technologieën worden gebruikt, behalve CSS

Stelt de kleur van het achterplan uit het palet in. De kleur van de erfgenaam valt altijd samen met de kleur van het voorouderelement.

Methode 1

Naar mijn mening is dit de beste manier, omdat het het gemakkelijkst, beknopt en modern is. Het maakt gebruik van de CSS3-eigenschap Achtergrondformaat. die we toepassen op de tag HTML. ​Precies HTML. , maar niet Lichaam. omdat De hoogte is groter dan of gelijk aan de hoogte van het browservenster.

Installeer een vaste en gecentreerde achtergrond en pas vervolgens de grootte aan met Achtergrondformaat: Cover .

Html { 

Achtergrond-afbeelding: URL (afbeeldingen / achtergrond.jpg);

Achtergrond-Herhaal: no-herhaal;

Achtergrondpositie: centrumcentrum;

Achtergrond-bijlage: vast;

-Webkit-achtergrond-formaat: dekking;

-Moz-achtergrond-maat: dekking;

-O-achtergrondformaat: dekking;

Achtergrondformaat: dekking; 

Demo

Deze methode werkt in

  • Chrome (elke versie)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

IE 9+

Voor afbeeldingen om snel te laden, plaatst u uw sites alleen van beproefde hostingproviders, bijvoorbeeld beet.com 
Gebruikers en zoekmachines houden van snelle sites. 

Achtergrond-afbeelding: URL (afbeeldingen / achtergrond.jpg);

Methode 2

Deze methode voorziet in het gebruik van het IMG-element, waarvan de omvang zal variëren, afhankelijk van de grootte van het browservenster. Om het beeld naar het volledige scherm te strekken, moet het min-hoogte en breedte instellen met een waarde van 100%. En zodat het beeld niet wordt gecomprimeerd aan de kleinere omvang dan het origineel, installeer de min-breedte met de waarde van gelijke breedte van de afbeelding.

Als het vensterbreedte kleiner is dan de breedte van de afbeelding, wordt mediaquery gebruikt om de achtergrond in het midden uit te lijnen.

erven.

<img src = "/ afbeeldingen / background.jpg" class = "achtergrond" />

img.Background { Min-hoogte: 100%; Min-breedte: 640px; Breedte: 100%; Hoogte: Auto;

Positie: vastgesteld; Top: 0; Links: 0;

/ * Hangt af van de grootte van de afbeelding * /

@Media-scherm en (max-breedte: 640px) { img.bg { и Links: 50%; margin-links: -320px; Demo

Erft alle kenmerken van het ouderelement

Deze methode werkt in:

Alle versies van goede browsers (Chrome, Opera, Firefox, Safari) IE 9+ и Methode 3. . Een andere manier is als volgt: Bevestig de afbeelding <img /> aan de linkerbovenhoek van de pagina en rek deze uit met behulp van de min-breedte en min-hoogte-eigenschappen van 100%, terwijl u de beeldverhouding behoudt. Waar, met deze aanpak is de foto niet gecentreerd. Maar dit probleem wordt opgelost door de afbeelding in <DIV />, die we 2 keer de grootte van het venster maken. En de afbeelding zelf rekken en zetten het midden in. <div class = "achtergrond"> <img src = "/ afbeeldingen / background.jpg" />

</ div> Div.Background { <div class = "achtergrond"> Positie: vastgesteld;

Top: -50%;

Links: -50%; Breedte: 200%; Hoogte: 200%;

img { Positie: absoluut; Top: 0;

Links: 0; RECHTS: 0; :

Onderkant: 0;

Marge: auto; Min-breedte: 50%; Min-hoogte: 50%; .

Deze methode werkt in goede browsers en IE 8+.

Ik hoop dat deze informatie nuttig voor u zal zijn. Persoonlijk gebruik ik vaak deze methoden, vooral eerst. Er zijn toch nog andere manieren om een ​​afbeelding op de achtergrondachtergrond met CSS te plaatsen. Als u over hen weet, deel, kunt u opmerkingen. Stel achtergrondkleur en / of een foto voor een pagina of een apart item is eenvoudig genoeg. Het belangrijkste is om te weten waar en hoe het kan worden gedaan, evenals een kleurcode en / of een achtergrondfoto te hebben. Het is mogelijk dat je vanuit dit artikel veel nieuwe dingen zult leren, maar ik heb het specifiek gemaakt voor beginners. Daarom zal alles zo kort mogelijk en tegelijkertijd in detail zijn. Het belangrijkste is dat u niet alleen de algehele presentatie en kant-en-klare voorbeelden ontvangt, maar ook begrijpt hoe u een achtergrond in HTML kunt maken. Om de achtergrond in HTML in te stellen, gebruik het tussenliggende doctype En ik zal beginnen met het feit dat HTML5. Er is geen mogelijkheid om de achtergrond voor de site in te stellen. Deze functie werd besloten om te verdragen in CSS. Daarom, als u hieronder van plan bent, en wilt u geldig » (correct) Code, u moet in het overgangstype van het document verblijven. Hiertoe moet uw webpagina beginnen met de volgende regel: <! DOCTYPE HTML PUBLIEK "- // W3C // DTD HTML 4.01 » Overgangs- // nl "" http://www.w3.org/tr/html4/Loose.dtd ">

Tijd voor praktische lessen

Hoe is de achtergrond op een webpagina? (#)Als je het ontdekt, laten we begrijpen hoe de achtergrond is gemaakt. En het eerste hier moet worden opgemerkt - dit is het verschil tussen

Achtergrond kleur

Achtergrondafbeelding

​Aan het begin gaat

Achtergrond kleur Links: 50%; die alle beschikbare paginasuimte of zijn element overstromt. De herhaalde bovenop achtergrondafbeelding

​Visueel kan dit als volgt worden weergegeven: Positie: absoluut; Top: 0;

Achtergrond van HTML-document en zijn elementen

Na teleurstellend de belangrijkste elementen van de achtergrondregeling, evenals hun attributen, ga dan rechtstreeks naar de analyse van een specifiek voorbeeld. In de hieronder getoonde programmacode probeerde ik alle beschreven elementen in te schakelen.

Het tweede dat je moet weten is het verschil tussen

lichaam van het document RECHTS: 0; :

Element van het document

Lichaam van het document

aangegeven in de HTML-code van het webpagina-tag

Lichaam. inclusief alle inhoud van de webpagina. Uiteraard kan de achtergrond van het document van het document niet transparant zijn. Als de achtergrond van het lichaam van het document niet is opgegeven, wordt de standaardwaarde opgegeven in de browserinstellingen gebruikt. Pagina-elementen zijn in de tag

​Het is opmerkelijk dat u de kleur en / of achtergrondafbeelding kunt instellen met HTML naar alle elementen van het document. De achtergrondafbeelding kan bijvoorbeeld alleen worden opgegeven voor tabellen. Standaard hebben ze meestal een transparante achtergrond. Positie: absoluut; Top: 0;

Attribuut bgolor om achtergrondkleur te creëren

Om te vragen

Het document of zijn elementen wordt gebruikt kenmerk Hoogte: 200%; и achtergrondafbeelding bgolor , bijvoorbeeld: <BODY BGCOLOR = "# EC008C">

<! - Document Body ->

</ Lichaam>

In dit geval zetten we de achtergrondkleur voor de pagina als geheel in. Maar een voorbeeld van hoe de achtergrondkleur voor de tabel in te stellen, in de tag Tafel <Table BGCOLOR = "# EC008C"> <TR> <TD> Tekst met achtergrond </ TD> </ TR> </ TABEL>

Het is opmerkelijk dat de achtergrondkleur in de tabel ook kan worden opgegeven voor rijen in de tag

Tr En voor hun cellen in de tag TD.

Hoe de kleurcode te vinden? Je hebt waarschijnlijk al opgemerkt dat de kleur in HTML is ingesteld op Special code HTML. , bijvoorbeeld:

# EC008C.

  • ​Om de code te achterhalen die u nodig hebt, kunt u een van de grafische redacteuren gebruiken. Bijvoorbeeld, in Photoshop kunt u gebruiken "
  • Eyedropper Tool.
  • (Pipet)

Om een ​​kleur van een punt op de foto te krijgen. Vervolgens moet u op de resulterende kleur klikken op de werkbalk en in het venster dat wordt geopend "

Kleur kiezer. (Kleurselectie) Kleurcode kopiëren. Ik vestig uw aandacht op het feit dat deze code zonder een lattice-teken zal zijn Aan het begin moet dit teken handmatig worden toegevoegd.

U kunt ook tal van online services gebruiken, bijvoorbeeld: 
Hun werkprincipe is nog eenvoudiger - klik op de gewenste kleur en ontvang de code. Attribuut achtergrond om een ​​achtergrondafbeelding te maken Evenals in het geval van achtergrondkleur en in het geval van
Je moet een speciaal attribuut gebruiken, namelijk 
achtergrond. 
<body background = "/ 2014/06 / bg.jpg">

В HTML. In dit geval vragen we de achtergrondfoto voor de pagina als geheel. Het is opmerkelijk dat het als gevolg van de beperkingen van de grootte van de afbeelding wordt herhaald, bijvoorbeeld: Zoals u ziet, wanneer herhaling, is de overgang tussen de foto's merkbaar. Daarom worden speciale foto's vaak gebruikt, waar rekening wordt gehouden met dit moment. Maar een voorbeeld van hoe een achtergrondfoto voor een tabel in te stellen, in tag

<Table Achtergrond = "/ 2014/06 / BG.jpg"> <TR> <TD> Tekst met achtergrond </ TD> </ TR> </ TABEL> HTML. Het is opmerkelijk dat de achtergrondafbeelding alleen kan worden ingesteld voor de tabel als geheel en / of zijn aparte cel. Voor een string werkt het niet. Attribuut achtergrond om een ​​achtergrondafbeelding te maken .

Absoluut en relatief pad naar de achtergrondafbeelding (Kleurselectie) Afzonderlijk de moeite waard om aandacht te schenken Adres achtergrondafbeelding ​In dit geval wordt het relatieve pad naar de foto gebruikt, d.w.z. Het adres is aangegeven op de locatie van het afbeeldingsbestand naar het webpagina-bestand. Deze optie kan niet bijzonder succesvol worden genoemd. Het is het beste om het absolute pad naar de foto te gebruiken, d.w.z.

de volledige URL <body background = "/ afbeeldingen / bg.jpg"> .

In dit geval heeft u geen concommende problemen. Voor meer kunt u hier lezen.

Laten we samenvatten 
Attributen gebruiken moreel verouderd, want voor de geldigheid van de HTML-code moet je de overgang gebruiken DOCTYPE.

​Om de achtergrondkleur in HTML in te stellen, gebruikt u speciale codes die u kunt ontdekken in een grafische editor of met behulp van speciale online services. De achtergrondafbeelding wordt gedupliceerd in de staarten van het toegewezen gebied en ligt bovenop de achtergrondkleur. Om een ​​achtergrondafbeelding op te geven, is het beter om zijn volledige URL te gebruiken. Ik heb alles hierover. Bedankt voor de aandacht. Succes!

Korte link: http://goo.gl/03TSNZ Hoe maak je een achtergrond voor de site? Elke kamer zal er veel beter uitzien als haar verdieping lieve Perzische tapijt opkomt. Dus de slechtere uw site? Misschien is het tijd en zijn vloer " instellen
  • »Duur elegant handgemaakt paleis. We zullen meer begrijpen over het maken van een achtergrond voor de site:
  • Het gebeurt dat het oude ontwerp van de site al is gekomen. En ik wil iets nieuws en smakelijk. En het nieuwe ontwerp zal zo zijn als je het met je eigen handen kookt.
  • Maar om volledig al het ontwerp van de resource zelf te veranderen - het ding is ondankbaar. Ja, en niet iedereen heeft hier iets aan. "
  • aangescherpt

"Handen. Daarom is het het gemakkelijkst om de oude sjabloon te vernieuwen, de kleur van de achtergrond van de bron of de achtergrondafbeelding te veranderen.

Er zijn verschillende manieren om de achtergrond op de site te veranderen. Dit gebruikt kansen. 
CSS. of ​Maar veel van de eigenschappen voor het werken met de achtergrond hebben dezelfde naam en methodologie van toepassing in deze webtechnologieën.
  • Als achtergrond kunt u meerdere items gebruiken: Kleur; ;
  • Achtergrondfoto;
  • Textural Image. We zullen omgaan met het gebruik van elk van hen in meer detail. Om de kleur van de achtergrond van de achtergrond voor de site in te stellen, wordt het pand gebruikt.

Achtergrond kleur.

Stijlkenmerk 

Stijl. ​Dat wil zeggen, om de basiskleur in te stellen voor de webpagina, moet u deze registreren in de Tag <BODY>. Bijvoorbeeld: <Body style = "achtergrondkleur: # 55d52b"> <p> Achtergrond van de site # 55d52b </ p> </ lichaam>

Naast de hexadecimale kleurcode wordt de waarde ondersteund in het zoekwoordformaat of

RGB. 

​Voorbeelden:

<Body style = "achtergrondkleur: RGB (51.255.153)"> <P> Achtergrond van de RGB-website (23.113.44) </ P> </ BODY> <Body style = "achtergrondkleur: groen"> <p> Achtergrond van de groene website </ p> </ lichaam> De achtergrondkleur instellen met behulp van trefwoorden heeft een aantal beperkingen in vergelijking met de resterende twee manieren.

Totaal 16 trefwoorden worden ondersteund voor het instellen van kleur. Hier zijn er een aantal:

Wit, rood, blauw, zwart, geel andere. Daarom, om de achtergrond voor de site in te stellen

het is beter om hexadecimaal formaat of te gebruiken 

Naast het selecteren van kleur zijn andere instellingen beschikbaar. Als eigendom Ingestelde waarde Transparant

De achtergrond van de pagina wordt transparant. Deze waarde is standaard aan deze accommodatie toegewezen. Overweeg nu de mogelijkheid van een hyperteksttaal om het achtergrondpatroon voor de site te installeren. Het is mogelijk om het gebruik te maken van het pand. achtergrond afbeelding.

Voorbeeld: 

<Body style = "achtergrond-afbeelding: URL (IMG_1809.jpg)"> </ lichaam>

Zoals te zien is in de code, treedt de beeldbinding op via het pad

Url

Geplaatst tussen haakjes. Maar niet alle foto's blijken zo groot te zijn om het hele deel van het scherm met hun formaten te vullen. Laten we eens kijken hoe de kleinere figuur wordt weergegeven.

Stel dat we een site over poëzie ontwikkelen, en als substraat, moet u het beeld van Pegasus gebruiken. Het gevleugelde paard zal de vrijheid van creatieve gedachte aan de dichter verpersoonlijken!

We hebben dat het beeld één keer in het midden van het scherm wordt weergegeven. Maar helaas begrijpt de browser onze sublieme verlangens niet. En toont een kleinere afbeelding voor de achtergrond van de site zo vaak als het schermgebied geschikt is:

Waarschijnlijk zullen vier lachende paarden met vleugels van dichters te veel zijn voor inspiratie. Verbied daarom het klonen van onze Pegasus. Doe het gebruik van het pand

achtergrond herhaling. ​Mogelijke waarden: Herhaal-X - herhaling van de achtergrondafbeelding horizontaal;

Dus, we faciliteren de taak om de achtergrond van de achterkant van twee foto's in te stellen: animatie en regulier beeld. In dit geval wordt de GIF-animatie vastgesteld en wordt de tekening gescrold, samen met de inhoud van de pagina.

Herhaal-y - verticaal;

Herhaal - op beide assen;

NO-REPEAT - Herhaling is verboden.

Onder de vermelde opties zijn we geïnteresseerd in de laatste. Voordat we de achtergrond van de site wijzigen, gebruiken we het in uw code:

<Body Style = "Background-Image: URL (3.jpg); Achtergrond-Herhaal: NO-REPEAT"> </ BODY>

Maar natuurlijk is het beter als onze Letow zich in het midden van het scherm bevindt. Eigendom

Achtergrond Is bedoeld om het achtergrondpatroon op de pagina te plaatsen. Stel de locatie coördinaten op verschillende manieren in:
​Dat wil zeggen, om de basiskleur in te stellen voor de webpagina, moet u deze registreren in de Tag <BODY>. Bijvoorbeeld: Sleutelwoord (
<body background = "/ afbeeldingen / bg.jpg"> Bovenaan, onderste, midden, links, rechts)
of Percentages - het aftellen begint vanuit de linkerbovenhoek;
Elke kamer zal er veel beter uitzien als haar verdieping lieve Perzische tapijt opkomt. Dus de slechtere uw site? Misschien is het tijd en zijn vloer " In maateenheden (
(Kleurselectie) Pixels
We gebruiken de gemakkelijkste optie om te centreren:

<Body Style = "Background-Image: URL (3.jpg); Achtergrond-Herhaal: No-Repeat; Achtergrond-Positie: TOP CENTER"> </ BODY>

Het gebeurt dat je de positie van de tekening moet oplossen bij het scrollen. Gebruik daarom een ​​speciaal onroerend goed voordat u een foto van de site maakt.

Achtergrond-bijlage.

​Geldige waarden: <ul> <li> scroll; </ li> <li> vast. </ Li> </ ul>

We hebben de laatste betekenis nodig. Nu ziet de code van ons voorbeeld er als volgt uit: [/ HTML] 
<Body Style = "Background-Image: URL (3.jpg); Achtergrond-Herhaal: No-Repeat; Achtergrond-Positie: TOP CENTER; Achtergrond-Bijlage: Vast"> </ lichaam> 

In het eerste voorbeeld, voor de achtergrond gebruikten we een groot en mooi woestijnlandschap. Maar voor zo'n schoonheid moet je vol betalen. Het gewicht van het beeld dat wordt uitgevoerd in hoge kwaliteit kan verschillende megabytes bereiken.

Dit volume heeft geen invloed op de downloadsnelheid van de browserpagina met hogesnelheidsverbinding met internet. Maar hoe zit het met het mobiele internet, bij gebruik welke het downloaden van verschillende "

meter

"Zal veel tijd kosten?

"Zal veel tijd kosten? Al deze problemen zijn opgelost met behulp van een textuur achtergrond. Het gebruikt een klein beeld als een patroon van textuur. Zelfs onder de toestand van zijn meervoudige herhaling wordt het patroon slechts één keer geladen.

Om een ​​donkere achtergrond voor de site te maken Lichaam. Photoshop. Lichaam. , Maak een afbeelding in de vorm van een strook van een lange 1200 pixel en een breedte van 15 pixels. Dan gebruiken we een eenvoudig zwart en wit verloop en verbinden we de resulterende textuur aan op de pagina Site:

<Body style = "background-image: URL (1.png); Kleur: RGB (0,51,204)"> </ lichaam>

Voor de duidelijkheid hebben we tekst toegevoegd en de kleur instellen met behulp van de accommodatie. Lichaam. Kleur Lichaam. ​Dat is wat er is gebeurd:

  • Hoogte: 200%; Alle hierboven beschreven eigenschappen zijn ook van toepassing op cascadingstijlplaten. Maak een achtergrond van de site
  • achtergrondafbeelding CSS.
  • Door de code van een van onze vorige voorbeelden te herschrijven: <HOOFD> <TITEL> DOCUMENT Untitled </ titel> <Style Type = "Tekst / CSS"> Body {background-Image: URL (3.jpg); Achtergrond-Herhaal: NO-REPEAT; Achtergrondpositie: topcentrum; achtergrond-bijlage: vast;} </ style> </ head> <body> </ lichaam>
  • Het resultaat zal vergelijkbaar zijn. Welnu, we hebben alle opties gekeken, hoe de achtergrond op de site te veranderen. Nu blijft het alleen om een ​​tekening van het toekomstige tapijt te creëren en verspreiden zich op de pagina's van uw hulpbron. Maar dit is jouw hand.
  • Goede dag voor iedereen om iets nieuws te leren en te leren! Heb je ooit aandacht besteed aan het uiterlijk van sites bij het ontwikkelen van de makers zijn lui om de achtergrond van pagina's te regelen? En ik draaide zich om. Het ziet er uitslachting uit. Vaak is het vanwege het gebrek aan gebruikelijke scheidingen tussen verschillende soorten informatie, gemengd en verdwijnt gewoon de wens om zo'n webresource verder te bekijken. Zodat een dergelijk probleem met je project gebeurde, besloot ik om een ​​artikel over het onderwerp te schrijven: "Hoe maak je een achtergrond van pagina's in HTML." Na het lezen van de publicatie, leert u, met welke tools u het achtergrondontwerp kunt instellen, hoe een achtergrond vast te maken of te veranderen en nog veel meer, waardoor uw website aantrekkelijk is. Laten we nu beginnen!
  • Basishulpmiddelen voor het instellen van de achtergrondwebpagina's Om de achtergrondafbeelding in te stellen, hebben web-taal ontwikkelaars een attribuutachtergrond verstrekt. Het is verkrijgbaar in zowel HTML als CSS.
  • In de Markup-taal is dit een attribuut van het lichaamstag en in de stijltabellen - een universele eigenschap waarmee u tegelijkertijd tot 5 de kenmerken van het achterplan kunt instellen. Achtergrond is een vrij flexibel element dat kan worden gebruikt om de achtergrond te taken als een kleur, kleurenfoto of zelfs animatie. Dus, om de achtergrondafbeelding te installeren via het apparaat HTML <body> is het voldoende om een ​​dergelijke code te schrijven:
  • <Body background = "Bestandsadres"> ... </ body> En in plaats van de woorden "Bestandsadres" plaatst het pad naar de afbeelding.
  • Merk op! Als u in de vorm van de achtergrond een Monochon-canvas wilt zien opgegeven in het kleurenpalet, wordt dit gedaan met behulp van het BGColor-attribuut. Bijvoorbeeld, <body bgcolor = "# 000000"> ... </ body>, vroegen we een zwarte achtergrond voor onze site.
  • Kleuren in CSS en HTML worden ingesteld door een Engels woord (bijvoorbeeld rood), of een speciale code die bestaat uit een teken # en zes tekens erna (bijvoorbeeld # ffdab9). Bij het typen van een tweede optie in gespecialiseerde softwareproducten voor ontwikkelaars, verschijnt het palet automatisch voor u. Als u net begon met het leren van deze webtalen, kan de kleurcode op internet worden gespakt.

Achtergrond als eigendom in cascading-stijltafels Hoogte: 200%; :

Het is ingesteld of in een apart bestand met CSS-stijlen, of in het <Style> -element. Met deze accommodatie kunt u achtergrondpatronen of kleuren installeren, geef de startlocatie op de pagina op, stelt u terugkerende en vaste afbeeldingen in. Voor meer duidelijkheid heb ik definities in de tabel gemaakt. 

Parameters Doel

Gebruikt om een ​​vaste of geschroefde afbeelding te installeren, samen met de inhoud van de site. Gebeurt fixed, scroll en erfen

Stelt de achtergrondafbeelding in. Het kan gelijktijdig met de kleur worden aangegeven. Dan wordt de laatste weergegeven totdat de afbeelding volledig is geladen.

Stelt de initiële locatie in van het object voor de vorige parameter. Horizontaal geeft rechts, links en midden en verticaal - onderkant, boven en midden aan. Bovendien kunt u de positie (erven), ingesteld in percentage, pixels en andere dimensies 

Toepassen bij gebruik van het Attribuut voor de achtergrond-beeld. Regelt hoe het beeld wordt herhaald. U kunt 2 waarden opgeven: voor horizontaal en verticaal. Er zijn kenmerken: NO-REPEAT, REPEAT, REPEAT-X, REPEAT-Y, erven, ruimte

Добавить комментарий