Hur man gör en bildbakgrund i HTML och CSS. 3 enkla sätt

Ställer in färgen på den bakre planen ur paletten. Högskolans färg sammanfaller alltid med färgen på förfaderelementet.
Hälsningar. I den här artikeln vill jag berätta om tre sätt att placera en bild som en bakgrund av hela sidan med endast HTML + CSS (utan att använda JS).

Hälsningar. I den här artikeln vill jag berätta om tre sätt att placera en bild som en bakgrund av hela sidan med endast HTML + CSS (utan att använda JS).

Så kraven på bakgrundsbilden är vi som följer:

  • 100% Bredd och sidor Höjd täckt
  • Bakgrundsskalorna om det behövs (bakgrund sträcker sig eller komprimeras beroende på skärmens storlek)
  • Klistra in proportionerna av bilderna (bildförhållande)
  • Bildcentrerad på sidan
  • Bakgrunden orsakar inte scrolls
  • Lösningen är maximalt crossbrawser
  • Ingen annan teknik används utom CSS

Ställer in färgen på den bakre planen ur paletten. Högskolans färg sammanfaller alltid med färgen på förfaderelementet.

Metod 1

Enligt min åsikt är detta det bästa sättet, eftersom det är det enklaste, korta och moderna. Den använder CSS3-egendomen Bakgrundsstorlek. som vi ansöker om taggen Html . Exakt Html , men inte Kropp. därför att Dess höjd är större än eller lika med höjden på webbläsarfönstret.

Installera en fast och centrerad bakgrund och justera sedan sin storlek med Bakgrundsstorlek: Skydd .

Html { 

Bakgrund-Bild: URL (Bilder / Bakgrund.jpg);

BAKGRUND-REPEAT: NO-REPEAT;

Bakgrundsposition: Center Center;

Bakgrundsfäste: Fast;

-WebKit-Bakgrundsstorlek: Skydd;

-Moz-bakgrundsstorlek: lock;

-O-bakgrundsstorlek: lock;

Bakgrundsstorlek: Skydd; 
} 

Demo

Denna metod fungerar i

  • Chrome (vilken version som helst)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

Dvs 9+

För att bilder ska ladda snabbt, lägg bara dina webbplatser från beprövade värdleverantörer, till exempel, beGET.com 
Användare och sökmotorer älskar snabba webbplatser. 

Bakgrund-Bild: URL (Bilder / Bakgrund.jpg);

Metod 2

Denna metod tillhandahåller användningen av IMG-elementet, vars storlek varierar beroende på storleken på webbläsarfönstret. För att sträcka bilden till helskärmen måste den ställa in minhöjd och bredd med ett värde på 100%. Och så att bilden inte komprimeras till den mindre storleken än originalet, installera minbredd med värdet av lika breda bredden på bilden.

Om fönsterbredden är mindre än bildens bredd, kommer mediefråga att användas för att anpassa bakgrunden i mitten.

ärva.

<img src = "/ images / background.jpg" class = "bakgrund" />

img.background { Min-höjd: 100%; Minbredd: 640px; Bredd: 100%; Höjd: Auto;

Position: Fast; Topp: 0; Vänster: 0;

/ * Beror på storleken på bilden * /

@Media skärm och (max-width: 640px) { img.bg { и Vänster: 50%; marginal-vänster: -320px; } } } Demo

Arvar alla människors egenskaper

Denna metod fungerar i:

Alla versioner av bra webbläsare (Chrome, Opera, Firefox, Safari) Dvs 9+ и Metod 3. . Ett annat sätt är som följer: Fixa bilden <img /> till det övre vänstra hörnet på sidan och sträck den med hjälp av minbredden och minhöjda egenskaperna på 100%, samtidigt som bildförhållandet upprätthålls. TRUE, med detta tillvägagångssätt, är bilden inte centrerad. Men det här problemet löses genom att bilda bilden i <div />, som vi gör 2 gånger fönstret. Och själva bilden sträcker vi oss och lägger i mitten. <div class = "bakgrund"> <img src = "/ images / background.jpg" />

</ div> Div.background { <div class = "bakgrund"> Position: Fast;

Topp: -50%;

Vänster: -50%; } Bredd: 200%; Höjd: 200%; }

img { Position: absolut; Topp: 0;

Vänster: 0; Höger: 0; :

Botten: 0;

Marginal: Auto; Minbredd: 50%; Minhöjd: 50%; } .

Denna metod fungerar i bra webbläsare och IE 8+.

Jag hoppas att den här informationen kommer att vara användbar för dig. Personligen använder jag ofta dessa metoder, speciellt först. Visst finns det andra sätt att sätta en bild på baksidan bakgrund med CSS. Om du vet om dem, dela, vänligen kommentera. Ange bakgrundsfärg och / eller en bild för en sida eller ett separat objekt är enkelt nog. Det viktigaste är att veta var och hur det kan göras, liksom att ha en färgkod och / eller en bakgrundsbild. Det är möjligt att från den här artikeln lär du dig mycket nya saker, men jag skapade det specifikt för nybörjare. Därför kommer allt att vara så kort som möjligt och i detalj samtidigt. Det viktigaste är att du inte bara får de övergripande presentationen och färdiga exemplen, men förstår också hur man gör en bakgrund i HTML. För att ställa in bakgrunden i HTML använd den mellanliggande doktypen Och jag börjar med det faktum att Html5. Det finns ingen möjlighet att ställa bakgrunden till webbplatsen. Denna funktion bestämdes för att uthärda i CSS. Därför, om du planerar att använda nedan, och du vill få en giltig » (korrekt) Kod, du behöver stanna på dokumentets övergångstyp. För att göra detta bör din webbsida börja med följande rad: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » Övergångs- // en "" http://www.w3.org/tr/html4/loose.dtd ">

Tid för praktiska klasser

Hur är bakgrunden på en webbsida? (#)Om du tänkte ut det, låt oss få förstå hur bakgrunden skapas. Och det första här bör noteras - det här är skillnaden mellan

Bakgrundsfärg

Bakgrundsbild

. I början går

Bakgrundsfärg Vänster: 50%; som översvämmer alla tillgängliga sidutrymme eller dess element. Den upprepade ovanpå den bakgrundsbild }

. Visuellt kan detta avbildas enligt följande: Position: absolut; Topp: 0;

Bakgrund till HTML-dokument och dess element

Efter att ha besvikit, fortsätter de huvudsakliga elementen i bakgrundsreglaget, liksom deras attribut, direkt till analysen av ett specifikt exempel. I programkoden som visas nedan försökte jag aktivera alla beskrivna element.

Det andra du behöver veta är skillnaden mellan

dokumentets kropp Höger: 0; :

element i dokumentet

Dokumentets kropp

indikeras i HTML-koden på webbsidans tagg

Kropp. som innehåller all innehåll på webbsidan. Självklart kan bakgrunden till dokumentet i dokumentet inte vara transparent. Om bakgrunden till dokumentets kropp inte är angiven används det standardvärdet som anges i webbläsarinställningarna. Sidelement är inne i taggen }

. Det är anmärkningsvärt att du kan ställa in färg- och / eller bakgrundsbilden med hjälp av HTML till alla delar av dokumentet. Till exempel kan bakgrundsbilden endast anges för tabeller. Som standard har de vanligtvis en transparent bakgrund. Position: absolut; Topp: 0;

Attribut bgcolor för att skapa bakgrundsfärg

För att fråga

Dokumentet eller dess element används attribut Höjd: 200%; и bakgrundsbild bgcolor , t.ex: <Kropp bgcolor = "# ec008c">

<! - Dokumentkropp ->

</ Body>

I det här fallet ställer vi bakgrundsfärgen för sidan som helhet. Men ett exempel på hur man ställer in bakgrundsfärgen för bordet, i taggen Tabell <Tabell bgcolor = "# ec008c"> <tr> <td> Text med bakgrund </ td> </ tr> </ table>

Det är anmärkningsvärt att bakgrundsfärgen i tabellen också kan specificeras för rader i taggen

F Och för deras celler i taggen Td.

Hur får du reda på färgkoden? Du har nog redan märkt att färgen i HTML är inställd på Special koda Html , t.ex:

# Ec008c.

  • . För att ta reda på koden behöver du färgen kan du använda en av grafikredigerarna. Till exempel, i Photoshop kan du använda "
  • Eyedropper verktyg.
  • (Pipett)

För att få en färg från en punkt på bilden. Då måste du klicka på den resulterande färgen på verktygsfältet och i fönstret som öppnas "

Färgväljare. (Färgval) Kopiera färgkod. Jag uppmärksammar det faktum att denna kod kommer att vara utan gitterskylt I början måste detta tecken läggas till manuellt.

Du kan också använda många onlinetjänster, till exempel: 
Deras arbetsprincip är ännu enklare - klicka på önskad färg och få den koden. Attribut bakgrund för att skapa en bakgrundsbild Såväl som i fallet med bakgrundsfärg och i fallet med
Du måste använda ett speciellt attribut, nämligen 
bakgrund. 
<kroppsbakgrund = "/ 2014/06 / bg.jpg">

В Html I det här fallet frågar vi bakgrundsbilden för sidan som helhet. Det är anmärkningsvärt att det på grund av begränsningarna av bildens storlek kommer det att upprepas, till exempel: Som du ser, när repetitionen är övergången mellan bilderna märkbar. Därför används speciella bilder ofta, där det här ögonblicket beaktas. Men ett exempel på hur man ställer in en bakgrundsbild för ett bord, i tagg

<tabell bakgrund = "/ 2014/06 / bg.jpg"> <tr> <td> Text med bakgrund </ td> </ tr> </ table> Html Det är anmärkningsvärt att bakgrundsbilden endast kan ställas in för bordet som helhet och / eller dess separata cell. För en sträng fungerar det inte. Attribut bakgrund för att skapa en bakgrundsbild .

Absolut och relativ väg till bakgrundsbilden (Färgval) Separat värt att uppmärksamma Adress bakgrundsbild . I detta fall används den relativa banan till bilden, d.v.s. Adressen är angiven på platsen för bildfilen till webbsidans fil. Det här alternativet kan inte kallas särskilt framgångsrikt. Det är bäst att använda den absoluta vägen till bilden, d.v.s.

Dess fulla webbadress <kroppsbakgrund = "/ bilder / bg.jpg"> .

I det här fallet kommer du inte att ha samtidiga problem. För mer om det kan du läsa här.

Låt oss sammanfatta 
Använda attribut moraliskt föråldrad, för för giltigheten av HTML-koden måste du använda övergångs Doktyp.

. För att ställa in bakgrundsfärgen i HTML använder du speciella koder som du kan ta reda på i en grafisk editor eller använda speciella onlinetjänster. Bakgrundsbilden dupliceras i svansarna i området som tilldelas och ligger ovanpå bakgrundsfärgen. För att ange en bakgrundsbild är det bättre att använda sin fulla webbadress. Jag har allt på detta. Tack för uppmärksamheten. Lycka till!

Kort länk: http://goo.gl/03tsnz Hur man gör en bakgrund för webbplatsen? Varje rum kommer att se mycket bättre om hennes golv stiger kära persiska mattan. Så den sämre din webbplats? Kanske är det dags och hans våning " uppsättning
  • »Dyra eleganta handgjorda palats. Vi kommer att förstå mer om hur man gör en bakgrund för webbplatsen:
  • Det händer att den gamla designen av webbplatsen redan har kommit. Och jag vill ha något nytt och gott. Och den nya designen kommer att vara sådan om du lagar den med egna händer.
  • Men att ändra helt all utformning av resursen själv - saken är otålig. Ja, och inte alla har en sak om detta. "
  • skärpad

"Händer. Därför är det lättast att uppdatera den gamla mallen, ändra färgen på resursens bakgrund eller dess bakgrundsbild.

Det finns flera sätt att ändra bakgrunden på webbplatsen. Detta använder möjligheter. 
CSS. eller . Men många av egenskaperna för att arbeta med bakgrunden har samma namn och metod för tillämpning i dessa webbteknologier.
  • Som bakgrund kan du använda flera objekt: Färg; ;
  • Bakgrundsbild;
  • Texturell bild. Vi kommer att hantera användningen av var och en av dem mer detaljerat. För att ställa in färgen på baksidan för webbplatsen används fastigheten.

bakgrundsfärg.

Stilattribut 

Stil. . Det vill säga att ställa in den grundläggande färgen för webbsidan, måste du registrera den inuti <Body> -taggen. Till exempel: <Body Style = "Bakgrundsfärg: # 55d52b"> <p> Bakgrund till webbplatsen # 55d52b </ P> </ Body>

Förutom hexadecimal färgkod stöds värdet i sökordsformatet eller

RGB. 

. Exempel:

<Body Style = "Bakgrundsfärg: RGB (51,255,153)"> <p> Bakgrund till RGB: s webbplats (23,113,44) </ P> </ Body> <Body Style = "Bakgrundsfärg: Grön"> <p> Bakgrund till den gröna webbplatsen </ P> </ Body> Att ställa in bakgrundsfärgen med nyckelord har ett antal restriktioner jämfört med de återstående två sätten.

Totalt 16 Nyckelord stöds för inställningsfärg. Här är några av dem:

Vit, röd, blå, svart, gul Övrig. Därför, för att ställa in bakgrunden för webbplatsen

Det är bättre att använda hexadecimalt format eller 

Förutom att välja färg finns andra inställningar tillgängliga. Om egendom Satt värde Transparent

Bakgrunden till sidan blir transparent. Detta värde är som standard tilldelat den här egenskapen. Nu överväga möjligheten till ett hypertextspråk för att installera bakgrundsmönstret för webbplatsen. Det är möjligt att göra det med egendomen. bakgrundsbild.

Exempel: 

<Body Style = "Bakgrund - Bild: URL (IMG_1809.jpg)"> </ Body>

Som framgår av koden sker bildbindningen genom banan

Url

Postat i parentes. Men inte alla bilder visar sig vara så stora för att fylla hela området på skärmen med sina storlekar. Låt oss se hur den mindre siffran kommer att visas.

Antag att vi utvecklar en webbplats om poesi, och som ett substrat måste du använda bilden av Pegasus. Den bevingade hästen kommer att personifiera friheten för kreativ tanke på poeten!

Vi behöver att bilden visas i mitten av skärmen en gång. Men tyvärr förstår webbläsaren inte våra sublima önskningar. Och visar en mindre bild för bakgrunden av webbplatsen så många gånger som skärmområdet kan rymma:

Förmodligen kommer fyra leende hästar med poeter att vara för mycket för inspiration. Förbud, förbjuda kloning av vår Pegasus. Gör det med egendomen

Bakgrund-Repeat. . Möjliga värden: upprepa-x - repetition av bakgrundsbilden horisontellt;

Så, vi underlättar uppgiften att ställa in bakgrunden från två bilder: animering och vanlig bild. I det här fallet kommer GIF-animationen att fixas, och ritningen rullas tillsammans med innehållet på sidan.

Upprepa-y - vertikalt;

Upprepa - på båda axlarna;

Ingen upprepning - repetition är förbjuden.

Bland de listade alternativen är vi intresserade av det sista. Innan vi ändrar bakgrunden på webbplatsen använder vi den i din kod:

<Body Style = "Bakgrund-bild: URL (3.jpg); Bakgrund-Repeat: No-Repeat"> </ Body>

Men det är självklart bättre om vår letow ligger mitt på skärmen. Fast egendom

Bakgrundsställning Bara är avsedd att placera bakgrundsmönstret på sidan. Ställ in platskoordinaterna på flera sätt:
. Det vill säga att ställa in den grundläggande färgen för webbsidan, måste du registrera den inuti <Body> -taggen. Till exempel: Nyckelord (
<kroppsbakgrund = "/ bilder / bg.jpg"> Topp, botten, mitt, vänster, höger)
eller Procentandelar - nedräkningen börjar från det övre vänstra hörnet;
Varje rum kommer att se mycket bättre om hennes golv stiger kära persiska mattan. Så den sämre din webbplats? Kanske är det dags och hans våning " I måttenheter (
(Färgval) Pixlar
). Vi använder det enklaste alternativet för centrering:

<Body Style = "Bakgrund-bild: URL (3.jpg); Bakgrund-Repeat: No-Repeat; Bakgrundsposition: Toppcenter"> </ Body>

Det händer att du måste fixa positionen på ritningen när du rullar. Därför, innan du gör en bild av webbplatsen, använd en speciell egendom.

Bakgrundsfäste.

. Giltiga värden: <ul> <li> bläddra; </ li> <li> fast. </ Li> </ ul>

Vi behöver den sista meningen. Nu kommer koden i vårt exempel att se ut så här: [/ html] 
<Body Style = "Bakgrund-bild: URL (3.JPG); Bakgrundsrepetition: No-Repeat; Bakgrundsposition: Toppcenter; Bakgrundsfäste: Fast"> </ Body> 

I det första exemplet, för bakgrunden, använde vi ett stort och vackert ökenlandskap. Men för sådan skönhet måste du betala full. Vikten av bilden som utförs i hög kvalitet kan nå flera megabyte.

Denna volym påverkar inte nedladdningshastigheten på webbläsarsidan med höghastighetsanslutning med Internet. Men vad sägs om det mobila internet, när du använder vilken nedladdning av flera "

meter

"Kommer du ta mycket tid?

"Kommer du ta mycket tid? Alla dessa problem löses med hjälp av en texturbakgrund. Den använder en liten bild som ett mönster av textur. Även under villkoret för sin flera repetition laddas mönstret endast en gång.

För att skapa en mörk bakgrund för webbplatsen gå till Kropp. Photoshop. Kropp. , Skapa en bild i form av en remsa av en lång 1200 pixel och en bredd på 15 pixlar. Sedan använder vi en enkel svartvit gradient och ansluta den resulterande texturen till webbplatssidan:

<Body Style = "Bakgrund-Bild: URL (1.png); Färg: RGB (0,51,204)"> </ Body>

För tydlighet, lägger vi till text och satte den färg med fastigheten. Kropp. Färg Kropp. . Det är vad som hände:

  • Höjd: 200%; Alla egenskaper som beskrivs ovan är också tillämpliga för kaskad stilark. Skapa en bakgrund av webbplatsen
  • bakgrundsbild CSS.
  • Genom att skriva om ett av våra tidigare exempel: <Head> <Titel> Dokument Untitled </ Titel> <Style Type = "Text / CSS"> Body {Background-image: URL (3.jpg); Bakgrund-Repeat: No-Repeat; Bakgrundsposition: Toppcenter; Bakgrundsfästning: Fast;} </ Style> </ Head> <Body> </ Body>
  • Resultatet kommer att vara liknande. Tja, vi tittade på alla alternativ, hur man byter bakgrund på platsen. Nu är det bara att skapa en ritning av den framtida mattan och sprida den på sidorna i din resurs. Men det här är din hand.
  • God dag till alla att lära och lära sig något nytt! Har du någonsin uppmärksammat utseendet på webbplatser när du utvecklar skaparna har varit lat för att ordna bakgrunden på sidor? Och jag vände mig. Det ser slakt. Ofta, på grund av bristen på vanliga separationer mellan olika typer av information, blandas den och helt enkelt försvinner lusten att ytterligare titta på en sådan webbresurs. Så att sådana problem hände med ditt projekt bestämde jag mig för att skriva en artikel om ämnet: "Hur man gör en bakgrund av sidor i HTML." Efter att ha läst publikationen kommer du att lära dig, med vilka verktyg du kan ställa in bakgrundsdesignen, hur man gör en bakgrund fast eller förändrad och mycket mer, vilket hjälper till att göra din webbplats attraktiv. Låt oss nu börja!
  • Grundläggande verktyg för att ställa in bakgrunds webbsidor För att ställa in bakgrundsbilden har webbspråksutvecklare tillhandahållit en attributbakgrund. Den är tillgänglig i både HTML och CSS.
  • På markeringsspråket är detta ett attribut på kroppsmärket, och i stilborden - en universell egenskap som gör att du kan ställa upp till 5 egenskaperna hos den bakre planen samtidigt. Bakgrund är ett ganska flexibelt element som kan användas för att uppgiften som en färg, färgbild eller till och med animering. Så, för att installera bakgrundsbilden via enheten HTML <Body> Det är tillräckligt för att skriva en sådan kod:
  • <Kroppsbakgrund = "Filadress"> ... </ Body> Och i stället för orden "filadress" sätt in sökvägen till bilden.
  • Observera dock! Om i form av bakgrunden du vill se en monochon-duk som anges från färgpaletten, görs det med BGColor-attributet. Till exempel <Body BgColor = "# 000000"> ... </ Body>, vi frågade en svart bakgrund för vår webbplats.
  • Färger i CSS och HTML sätts antingen av ett engelska ord (till exempel rött), eller en speciell kod som består av ett tecken # och sex tecken efter det (till exempel # ffdab9). När du skriver ett andra alternativ i specialprogramvaruprodukter för utvecklare visas paletten automatiskt framför dig. Om du just börjat lära dig dessa webbspråken, kan färgkoden spackas på Internet.

Bakgrund som egendom i kaskad stilbord Höjd: 200%; :

Den är inställd eller i en separat fil med CSS-stilar, eller i elementet <Style>. Med den här egenskapen kan du installera bakgrundsmönster eller färg, ange startplatsen på sidan, ställa in återkommande och fasta bilder. För större klarhet gjorde jag definitioner i tabellen. 

Parametrar Syfte

Används för att installera en fast eller rullad bild tillsammans med innehållet på webbplatsen. Händer fast, bläddra och ärver

Ställer in bakgrundsbilden. Det kan indikeras samtidigt med färgen. Då kommer den senare att visas tills bilden är helt laddad.

Ställer in den ursprungliga platsen för objektet för föregående parameter. Horisontellt indikerar höger, vänster och centrum och vertikalt - botten, topp och mitt. Dessutom kan du ärva position (ärva), i procent, pixlar och andra dimensioner 

Applicera när du använder bakgrundsbildsattributet. Reglerar hur bilden upprepas. Du kan ange 2 värden: för horisontell och vertikal. Det finns egenskaper: No-Repeat, Repeat, Repeat-X, Repeat-Y, Äventuer, Rymd

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