Många nybörjare layoutdesigners, som bara gräver i essensen av att skapa webbplatser, undrar ofta hur man gör bakgrunden till en bild i html. Och även om vissa människor kan lista ut den här uppgiften, uppstår fortfarande problem när bilden sträcks över hela skärmens bredd. Samtidigt vill jag att sajten ska visas lika på alla webbläsare, så kravet på flera webbläsare måste uppfyllas. Du kan ställa in bakgrunden på två sätt: med CSS-stil. Alla väljer mest för sig själva bästa alternativet. Säkert, CSS-stil mycket bekvämare, eftersom dess kod lagras i separat fil och tar inte upp extra kolumner i webbplatsens huvudtaggar, men först kommer vi att överväga en enkel metod för att installera en bild på webbplatsens bakgrund.

Grundläggande HTML-taggar för att skapa en bakgrund

Så låt oss gå vidare till frågan, bakgrund i html på hela skärmen. För att webbplatsen ska se vacker ut måste du förstå en ganska viktig detalj: det räcker att bara göra en gradientbakgrund eller måla den med en enfärgad färg, men om du behöver infoga en bild i bakgrunden kommer den inte att sträcka sig över hela skärmens bredd. Inledningsvis måste du välja en bild eller göra en design själv med tillägget där din webbplatssida kommer att visas. Först efter att bakgrundsbilden är klar, överför den till en mapp som heter "Bilder". I den kommer vi att lagra alla bilder, animationer och andra grafiska filer vi använder. Den här mappen ska finnas i rotkatalogen med alla dina html-filer. Nu kan du gå vidare till koden. Det finns flera alternativ för att skriva kod som kommer att ändra bakgrunden till en bild.

1. Skriv taggattribut.
2. Genom CSS-stil i HTML-kod.
3. Skriv CSS-stil i en separat fil.

Hur man gör bakgrunden till en bild i HTML är upp till dig, men jag skulle vilja säga några ord om hur det skulle vara mest optimalt. Den första metoden, med att skriva genom ett taggattribut, har länge varit föråldrad. Det andra alternativet används i mycket sällsynta fall, bara för att mycket av samma kod erhålls. Och det tredje alternativet är det vanligaste och mest effektiva. Här HTML-exempel taggar:

1. Det första sättet att skriva är genom taggattributet (body) i filen index.htm. Det är skrivet i följande form: (body background= "Mappnamn/Bildnamn.tillägg")(/body). Det vill säga, om vi har en bild med namnet "Picture" och JPG-tillägget, och vi döpte mappen till "Images", så kommer HTML-kodposten att se ut så här: (body background="Images/Picture.jpg") … (/kropp) .
2. Den andra inspelningsmetoden påverkar CSS-stilen, men skrivs i samma fil som heter index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Och den tredje inspelningsmetoden görs i två filer. I ett dokument som heter index.htm skrivs följande rad: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). Och i stilfilen som heter style.css skriver vi redan: body (bakgrund: url(Images/Picture.jpg")).

Vi har diskuterat hur man gör en bakgrundsbild i HTML. Nu måste du förstå hur du sträcker ut bilden över hela skärmens bredd.

Sätt att sträcka ut en bakgrundsbild till fönstrets bredd

Låt oss föreställa oss vår skärm i procentform. Det visar sig att hela skärmens bredd och längd blir 100 % x 100 %. Vi måste sträcka bilden till denna bredd. Låt oss lägga till en rad i bildposten i style.css-filen, som kommer att sträcka ut bilden till hela skärmens bredd och längd. Hur skrivs detta i CSS-stil? Det är enkelt!

bakgrund: url(Images/Picture.jpg")

bakgrundsstorlek: 100%; /* denna post är lämplig för de flesta moderna webbläsare */

Så vi kom på hur man gör en bild som bakgrund i html för att fylla hela skärmen. Det finns också ett sätt att skriva i filen index.htm. Även om denna metod är föråldrad är det nödvändigt för nybörjare att känna till och förstå det. I taggen (head)(style) div ( background-size: cover; ) (/style) (/head)-taggen betyder denna post att vi väljer ett speciellt block för bakgrunden, som kommer att placeras över hela bredden av fönstret. Vi tittade på 2 sätt att göra bakgrunden på en webbplats till en HTML-bild så att bilden sträcker sig över hela skärmens bredd i vilken modern webbläsare som helst.

Hur man gör en fast bakgrund

Om du bestämmer dig för att använda en bild som bakgrund för en framtida webbresurs, behöver du bara ta reda på hur du gör den orörlig så att den inte sträcker sig i längd och förstör det estetiska utseendet. Det är lätt nog att skriva detta lilla tillägg med hjälp. Du måste lägga till en fras i filen style.css efter bakgrund: url(Images/Picture.jpg") fixerad; eller istället lägga till en separat rad efter semikolon - position: fixed. Din bakgrundsbild kommer alltså att bli orörlig. Under Scrollar du igenom innehållet på sajten ser du att textraderna rör sig, men bakgrunden förblir på plats Så du har lärt dig hur du gör bakgrunden till en bild i html på flera sätt.

Arbeta med en tabell i HTML

Många oerfarna webbutvecklare, när de står inför tabeller och block, förstår ofta inte hur man gör en bild som tabellbakgrund i HTML. Som alla CSS-stilar är detta webbprogrammeringsspråk ganska enkelt. Och lösningen på ett sådant problem skulle vara att skriva ett par rader kod. Du borde redan kunna den skriften tabellrader och kolumner betecknas som taggar (tr) respektive (td). För att göra tabellbakgrunden i form av en bild måste du lägga till en enkel fras till (tabell), (tr) eller (td) taggen som indikerar en länk till bilden: bakgrund = URL till bilden. För tydlighetens skull, låt oss ge ett par exempel.

Tabeller med en bild istället för en bakgrund: HTML-exempel

Låt oss rita en 2x3-tabell och göra dess bakgrund till en bild sparad i mappen "Bilder": (tabellbakgrund = "Bilder/Bild.jpg") (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabell). På så sätt kommer vårt bord att målas in i bakgrunden på bilden.

Låt oss nu rita samma platta med måtten 2x3, men infoga en bild i kolumnerna 1, 4, 5 och 6. (tabell)(tr)(td bakgrund = “Bilder/Bild.jpg”)1(/td) (td) )2 (/td) (td)3(/td)(/tr) (tr)(td background = “Images/Picture.jpg”)4(/td) (td background = “Images/Picture.jpg”) 5( /td) (td bakgrund = “Images/Picture.jpg”)6(/td) (/tr) (/table). Efter visning ser vi att bakgrunden endast visas i de celler som vi har registrerat i, och inte i hela tabellen.

Webbläsarkompatibilitet för webbplatsen

Det finns också en sådan sak som kompatibilitet över webbläsare för en webbresurs. Detta innebär att webbplatssidorna kommer att visas lika korrekt i olika typer och webbläsarversioner. I det här fallet måste du justera HTML-koden och CSS-stilen till de webbläsare som krävs. Dessutom, i den moderna eran av smartphoneutveckling, försöker många webbutvecklare skapa webbplatser anpassade för mobila versioner och under en datorvy.

Vlad Merzhevich

På grund av webbsidornas egenheter spelar bakgrundsbilder en betydande roll i layouten av webbplatsdokument. Samtidigt är de aktivt involverade i en mängd olika saker, till exempel att automatisera processen att bifoga bilder till text, skapa gradientövergångar och, naturligtvis, lägga till en bakgrund under innehållet. Nedan finns några aspekter av att använda bakgrundsbilder.

Bakgrund på en webbsida

Att ställa in en bakgrundsbild på en webbsida sker traditionellt genom taggens bakgrundsattribut. .

Detta mönster upprepas horisontellt och vertikalt, vilket fyller hela webbläsarfönstret. Det är tydligt att det inte finns några speciella alternativ för kreativitet här, så låt oss vända oss till stilar och se vad som kan göras med CSS.

CSS har fem attribut som styr bakgrundsbilden: dess tillägg, position och upprepning. Men alla dessa parametrar ersätts av en universell egenskap, bakgrund , som vi kommer att använda i framtiden.

Lägger till en tapet

Att lägga till en bild sker genom att ställa in adressen till bilden med nyckelordet url. För att styra upprepningen av en bild används argumenten no-repeat, repeat-x (upprepa horisontellt) och repeat-y (upprepa vertikalt). Tack vare detta kan du få webbsidan som visas i fig. 1.

För att ställa in en bild på en webbsida måste du lägga till en bakgrundsstilsegenskap till BODY-väljaren, som visas i exempel 1.

Bakgrundsbild I i detta exempel

graphic target.gif definieras som bakgrunden på en webbsida utan att bilden upprepas. För att förhindra att bilden passar tätt mot webbläsarens kanter flyttas den 30 pixlar åt höger och 20 pixlar ner från sin ursprungliga position.

Upprepa ett mönster

På grund av det faktum att du kan ställa in bakgrundsmönstret att upprepas horisontellt eller vertikalt, finns flera alternativ tillgängliga för design av webbsidor. Till exempel, för att skapa en vertikal rand längs den vänstra kanten (Fig. 2), behöver du bilden som visas i Fig. 3.

Designen ska vara sådan att den passar ihop vertikalt utan märkbara sömmar, och även bildar en helhet med webbsidans angivna bakgrundsfärg.

På samma sätt kan du upprepa bakgrunden horisontellt, till exempel genom att skapa en gradient och ställa in den som en bakgrundsbild (Fig. 4).

För att få webbsidan som visas i fig. 4 måste du först göra en bild med en gradientövergång. Bredden är tillräcklig för att ange 20-40 pixlar, och höjden på bilden beror på syftet med dokumentet och den förväntade höjden på innehållet på webbsidan. Glöm inte också att en stor ritning kommer att leda till en ökning av volymen. grafisk fil. Och detta kommer att påverka dess laddningshastighet negativt och i slutändan leda till långsammare bakgrundsvisning. För det här fallet var en bild på 30x200 pixlar ganska lämplig (Fig. 5).

Exempel 3 visar HTML-koden för att skapa en gradientbakgrund.

Exempel 3: Horisontell bakgrundsupprepning

En gradientdesign passar bra med ett enfärgsblock, så i det här exemplet lägger vi till ett lager för att visa innehållet på webbsidan.

Lägger till en bild i texten

Genom att använda en bakgrundsbild kan du automatisera processen att lägga till grafik till specifik text, till exempel rubriker. För att göra detta, använd bakgrundens universella egenskap, som tillämpas på önskad väljare. Värdet är sökvägen till bilden och, för att förhindra att den upprepas, argumentet no-repeat (exempel 4).

Exempel 4: Lägga till en bild

Rubrik

Huvudtext

Som visas i det här exemplet kan bilden flyttas horisontellt och vertikalt i förhållande till sin ursprungliga position, som standard är detta det övre vänstra hörnet blockelement. Bakgrundsförskjutning gör att du kan placera bilden i förhållande till texten på önskat sätt. För att förhindra att texten överlappar bilden måste du lägga till egenskapen padding-left, på grund av vilken texten förskjuts åt höger med det angivna avståndet. Det är individuellt i varje enskilt fall och är vanligtvis lika med bildens bredd plus önskat mellanrum mellan bild och text.

17.10.2015

Inte än

Hej alla!
Låt oss fortsätta lära oss grunderna i HTML.
I den här lektionen kommer jag att berätta och visa exempel hur man gör en bakgrund från en färg eller bild på en HTML-sida.
Det är ganska enkelt!
Låt oss börja med färg!
Jag tror att du inte missade det, där jag berättade hur du ändrar färgen på texten och i slutet av artikeln gav jag koder för olika färger och nyanser. Varför påminde jag dig om den här lektionen? Ja, eftersom det finns ett bord med färdiga färgkoder, ta dem och öva på dem direkt i den här lektionen.
Så, hur man gör en bakgrundsfärg i HTML...

Bakgrundsfärg i HTML

Standardbakgrundsfärgen i ett HTML-dokument är vit. Hur ställer man in färgen som önskat?
Attributet "bgcolor" hjälper oss med detta. För att måla över bakgrunden, lägg till det här attributet i "body"-taggen:

Eller så här:

Här är hela HTML-koden:

Sidans text kommer att vara grön och bakgrunden blir svart.

Resultatet blir så här:

Om du vill skapa en bakgrund från en bild, lägg sedan till attributet "bakgrund" till taggen "kropp":

Fyll i valfri bild där din webbsida är (i mitt exempel kallas sidan "fon" med tillägget ".gif"):

Här är hela HTML-koden:

Resultatet blir så här:

Om bakgrundsbilden finns i mappen bilder eller någon annan mapp kommer den att se ut så här:

Här är hela HTML-koden:

Sidtext på en vacker bakgrund.

Det var allt för idag! Jag tror att lektionen inte var svår och du förstod allt. Om du har frågor, skriv i kommentarerna.
Jag ser fram emot att se dig på nästa lektion.

Föregående inlägg
Nästa inlägg

2 röster

Välkommen till min blogg. Vi fortsätter att förstå html grunderna. Den här handledningen kommer att vara så enkel och intressant att jag hoppas att du vill lära dig mer om programmeringsspråk. På bara ett par minuter lär du dig hur du gör en bild som bakgrund i HTML och uppnår utmärkta resultat.

Jag kommer också att prata om några nyanser som kommer att göra bakgrunden så jämn och vacker som möjligt. Nåväl, ska vi börja?

Att välja en bild

Jag skulle vilja börja med att välja en bild. Så att du ser jämnare och vackrare ut på sidan, och du behöver inte bry dig om storlekar och justering. Jag föreslår att du omedelbart letar efter sömlösa texturer. vad är det?

Tyvärr är det omöjligt att sträcka en bild i html för att fylla hela skärmen. Fotot används i verklig storlek. Om bilden är liten kommer den att täcka hela området, som i skärmdumpen nedan. För att sträcka ut bilden måste du skapa ytterligare ett CSS-dokument, utan detta fungerar det inte.

Även om du har möjlighet att kringgå systemet. För att göra detta, använd Photoshop och bilder upp till skärmens bredd (1280x720). Även om bilden i det här fallet, när du rullar nedåt, ersätter en annan.

Ett mycket bättre alternativ om du inte vill använda css är att använda sömlösa texturer. De har inga synliga leder. De är som tapeter eller moderna kakel i design. Den ena ersätter den andra och inga leder syns.

Om du är intresserad av avsaknaden av juridiska konsekvenser för deras användning, rekommenderar jag att du söker på webbplatsen Pixabay.com .

HTML

Låt oss nu arbeta med koden. Jag bör genast notera att vi nu arbetar med html, det vill säga att vi ändrar bilden inte för hela webbplatsen, utan bara för en specifik sida som koden skrivs för. Om du är intresserad av att ändra hela resursen måste du koda med css, men mer om det senare.

Så du kan arbeta i anteckningsblock, jag föredrar NotePad++. Det är mycket bekvämare att arbeta i det: koden är klar åt dig, taggarna är markerade. Programmet är gratis och väger cirka 3 MB. Jag rekommenderar det starkt, speciellt om du är nybörjare.

Så till taggen kropp du måste lägga till attribut bakgrund och ange en länk till bilden där bilden kommer att tas ifrån. Så här ser det ut i programmet.

Du kan bara öppna anteckningar och kopiera den här koden. Sätt en länk till bilden du gillar inom citattecken.

<html > <huvudet > <titel > Bakgrundsbild</titel> </huvud> <kroppsbakgrund = "https://pixabay.com/static/uploads/photo/2015/05/05/09/59/triangle-753534_960_720.png"> </kropp> </html>

Jag skulle vilja notera för nybörjare, detta är poängen. Om du tar en bild från Pixabay måste du klistra in länken inte på sidan med bilden, utan öppna bilden i nästa flik.

Kopiera denna exakta URL.

Spara dokumentet. Glöm inte att om du använder anteckningsblock måste du använda tillägget .html . Namnge bara dokumentet, t.ex. tillbaka.html . Annars kommer den att sparas som textdokument och webbläsaren förstår helt enkelt inte vad den behöver göra.

Klart, sidan är fylld med en annan färg.

Om du vill lära dig mer om html föreslår jag att du laddar ner gratis kurs av Evgeniy Popov . Från den kommer du att lära dig fler taggar, språkfunktioner, prova några nya tekniker och veta mer.

Jag kommer inte säga att Evgeniy Popovs kurser är väldigt populära. Många experter skäller ut honom, och om du har stött på sådana uttalanden, så här är min åsikt. Dessa lektioner tillhandahålls gratis och trots detta gör de ett utmärkt jobb med sin huvuduppgift - att visa nybörjaren grunderna och uppdatera honom.

Precis som varje författare har sin egen åsikt om hur man skriver, så har programmerare sin egen stil. Du kan ägna hela ditt liv åt att lära dig hur man skapar webbplatser, men du måste börja någonstans. Från böcker? Inte det här. Ja, de innehåller mer tillförlitlig information, uppdaterad information, men de är så svåra att bemästra.

Håller du inte med mig? Jag kan erbjuda ett alternativ. Bok av Elizabeth och Erica Freeman " Lär dig HTML, XHTML och CSS " Inte en särskilt tråkig bästsäljare och släpptes för inte så länge sedan, 2016. Informationen har ännu inte blivit inaktuell.

CSS

Om du behöver att bakgrunden ska upprepas på alla sidor på din webbplats är CSS ett måste. Naturligtvis kan du ange sökvägen varje gång, som i föregående kapitel. Men tänk om du med tiden behöver byta ut den: länken blir föråldrad eller så vill du helt enkelt ändra designen. Gå till varje sida och ändra koden? Det kommer inte att fungera så.

CSS hjälper till att lösa detta problem. Du måste skapa en fil med tillägget css och ange följande kod:

Låt oss prata lite om själva koden. Inom parentes, efter url du kan ange en länk till en bild från en tredjepartskälla, eller helt enkelt namnet på dokumentet om bilden finns i samma mapp som den här filen.

För den som vill veta bättre

På css hjälp du kan stretcha bakgrundsbild, se till att det inte upprepar sig, lägg till GIF-animationer och mycket mer.

Du kan inte skriva allt i en artikel. Och jag satte inte en sådan uppgift för mig själv. Det finns många finesser, och om de lovar att berätta allt i en artikel, så är detta inget annat än ett bedrägeri.

Vill du lära dig hur man skriver webbplatser korrekt? Jag rekommenderar att du lär dig programmeringsspråk. Jag kan rekommendera Andrey Bernatskys kurs " HTML5 och CSS3 från Zero till Pro " Jag gillar verkligen den här författaren. Jag gick inte just den här kursen för flera år sedan, det fanns något liknande, men mindre modernt.

Författaren pratar väldigt fint, allt är enkelt och begripligt. Höjdpunkten i den här kursen är att du inte bara studerar, du skapar en specifik webbplats tillsammans med läraren. Som ett resultat kommer du att få ett visitkort, en blogg och till och med en webbutik. Väldigt coolt. Du kan se de tre första teoretiska lektionerna om HTML5 från denna kurs här och nu.

Förresten, tillsammans med den här kursen får du 7 bonusar: grunderna i html och css av Andrei Bernatsky, layout för nybörjare, skapa en målsida på en kväll och mycket mer. Innan du förbinder dig till seriös träning, prova den kostnadsfria kursen " Öva HTML5 och CSS3 ».

Tja, det är i princip allt. Prenumerera på nyhetsbrevet för att lära dig mer. Mycket snart ska jag berätta lite mer om adaptiv layout, öka intäkterna från vilken blogg som helst och ge dig mycket användbara tips om att förenkla arbetet. Vi ses igen och lycka till i dina ansträngningar.

27/12/14 56,3K

Alla rum kommer att se mycket bättre ut om dess golv är täckt med en dyr persisk matta. Så varför är din webbplats sämre? Kanske är det dags att "täcka" golvet med en dyr, elegant handgjord matta. Låt oss ta en närmare titt på hur man skapar en bakgrund för en webbplats:

Bakgrund för sajten

Det händer att den gamla webbdesignen har blivit tråkig. Och jag vill ha något nytt och gott. A ny design det blir så om du lagar det med dina egna händer.

Men att helt förändra hela utformningen av en resurs på egen hand är en otacksam uppgift. Och inte allas händer är ordentligt utbildade för denna uppgift. Därför är det enklaste sättet att uppdatera en gammal mall att ändra bakgrundsfärgen på resursen eller dess bakgrundsbild.

Det finns flera sätt att ändra bakgrunden på en webbplats. För detta används funktionerna i CSS eller html. Men många av egenskaperna för att arbeta med bakgrunden har samma namn och appliceringsmetod i dessa webbteknologier.

Grunderna i att arbeta med bakgrunder i html

Flera element kan användas som bakgrund:

• Färg;
• Bakgrundsbild;
• Textur bild.

Låt oss titta på användningen av var och en av dem mer i detalj.

För att ställa in bakgrundsfärgen för en webbplats, använd egenskapen bakgrundsfärg för stilattributet. Det vill säga, för att ställa in huvudfärgen för en webbsida måste du skriva den inuti taggen . Till exempel:

Webbplatsbakgrund #55D52B

Förutom den hexadecimala färgkoden stöds ett värde i nyckelords- eller RGB-format. Exempel:

Webbplatsbakgrund rgb(23,113,44)

Webbplats bakgrund grön

Ställ in bakgrundsfärgen med nyckelord har ett antal begränsningar jämfört med de andra två metoderna.

HTML stöder endast 16 nyckelord för att ställa in färger. Här är några av dem: vit, röd, blå, svart, gul med flera.

Därför, för att ställa in bakgrunden för en HTML-webbplats, är det bättre att använda hexadecimalt eller RGB-format.

Förutom färgval finns andra anpassningsalternativ tillgängliga. Om egenskapen bakgrundsfärg är inställd på transparent blir sidans bakgrund genomskinlig. Detta värde tilldelas den här egenskapen som standard.

Låt oss nu titta på hypertextspråkets möjligheter för att ställa in en bakgrundsbild för en webbplats. Detta kan göras med hjälp av egenskapen background-image.

Som du kan se av koden är bilden länkad genom url-sökvägen som anges inom parentes. Men alla bilder är inte så stora att deras storlek fyller hela skärmytan. Låt oss se hur den mindre bilden kommer att visas.

Anta att vi utvecklar en webbplats om poesi och att vi måste använda en bild av Pegasus som bakgrund. Den bevingade hästen kommer att personifiera friheten i poetens kreativa tanke!

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

Kanske fyra leende hästar med vingar blir för mycket inspiration för poeter. Därför förbjuder vi kloning av vår Pegasus. Vi gör detta med hjälp av egenskapen background-repeat. Möjliga värden:

• repeat-x – upprepa bakgrundsbilden horisontellt;
• repeat-y – vertikalt;
• upprepa – på båda axlarna;
• ingen upprepning – upprepning är förbjuden.

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

Men det vore förstås bättre om vårt flygblad var placerat mitt på skärmen. Egenskapen bakgrundsposition är just avsedd för att placera bakgrundsbilden på sidan. Du kan ställa in platskoordinater på flera sätt:

• Sökord ( topp, botten, mitten, vänster, höger);
• Procent – ​​räkningen börjar från det övre vänstra hörnet;
• I måttenheter (pixlar).

Låt oss använda det enklaste centreringsalternativet:

Det händer att du behöver fixa positionen för en bild när du rullar. Innan du gör en bild som bakgrund för webbplatsen, använd därför den speciella egenskapen bakgrundsbilaga . De värden den accepterar är:

• rulla;


• fast.

Vi behöver det sista värdet. Nu kommer vår exempelkod att se ut så här:

Webbplats textur bakgrund

I det första exemplet använde vi ett stort och vackert ökenlandskap som bakgrund. Men du måste betala fullt ut för sådan skönhet. Vikten på bilden gjord hög kvalitet, kan nå flera megabyte.

Denna volym påverkar inte på något sätt sidladdningshastigheten för webbläsaren med en höghastighetsanslutning till Internet. Men vad sägs om mobilt internet, som kommer att ta lång tid att ladda flera "meter"?