Häckningsplats: hur man gör bakgrundsbilden html

Många nybörjare webbdesigners, bara för att gräva i kärnan i skapandet av webbplatser, ofta undrar hur man gör html bakgrundsbild. Och om några av dem kan ta itu med detta problem, är det fortfarande ett problem i samband med stretching hela bredden av bilden på skärmen. Samtidigt skulle jag vilja se platsen visas på samma sätt i alla webbläsare, så det borde uppfylla kraven i olika webbläsare. Du kan ställa in bakgrunden på två sätt: genom att använda HTML-taggar och CSS stilar. Var för sig själv väljer det bästa alternativet. Naturligtvis är CSS stil mycket mer praktiskt, eftersom dess kod lagras i en separat fil och tar inte upp extra högtalare i huvudwebbplatsens taggar, men låt oss först betrakta en enkel metod för att installera bilden på bakgrunden av webbplatsen.

Grundläggande HTML-taggar för att skapa bakgrunden

Så går vi till frågan om hur man gör bakgrundsbild i html på skärmen. För att se vacker plats, måste du förstå en ganska viktig detalj: det räcker bara för att göra en gradient bakgrund eller måla det en solid färg, men om du behöver infoga bakgrundsbilden, kommer det inte att sträcka hela bredden på skärmen. Bilden var ursprungligen nödvändigt att plocka upp eller gör din egen design med denna förlängning där du kommer att visa sida på webbplatsen. Först när bakgrundsbilden är klar, dra den till en mapp med namnet «bilder». I den kommer vi att lagra alla använda bilder, animationer och andra grafiska filer. Denna mapp ska placeras i rotkatalogen med alla dina html-filer. Nu kan du gå vidare och koden. Det finns flera alternativ för att skriva kod, varigenom bakgrunden kommer att förändra bilden.

1. Skriv tag attribut.
2. Genom CSS stil i HTML-koden.
3. Skriv CSS stilar i en separat fil.

Liksom i HTML för att göra bakgrundsbild, du bestämmer, men jag skulle vilja säga några ord om hur det skulle vara det mest optimala. Den första metoden är genom att skriva genom en tagg-attribut har länge varit föråldrad. Det andra alternativet används mycket sällan, eftersom det visar sig att en hel del av samma kod. Ett tredje alternativ är den vanligaste och effektiva. Här är exempel på HTML-taggar:

1. Den första inspelningen metoden genom tagg-attribut (kropp) i index.htm fil. Det lagras i denna form: (kroppsbakgrund = "folder_name / Nazvanie_kartinki.rasshirenie") (/ kropp). Det vill säga, om vi har en bild med titeln «Bild» och förlängning JPG, och mappen vi heter «Bilder», då HTML-kod posten ser ut så här: (kroppsbakgrund = "Bilder / picture.jpg") ... (/ body) .
2. Den andra metoden innebär att spela in ett CSS-format, men det är skrivet i samma fil med namnet index.htm. (Body style = "background: url (../ Images / picture.jpg)").
3. Den tredje metoden för inspelning görs i två filer. Dokumentet med namnet index.htm tag (huvud) skrivs en sådan linje: (huvud) (link rel = "stylesheet" type = "text / css" href = "http: // site / artikel / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ huvud). En fil som heter style.css stil redan skriver: body {background: url (Images / picture.jpg)}.

Liksom i HTML för att göra bakgrundsbilden, förstår vi. Nu måste du räkna ut hur man sträcka ut bilden över hela bredden av hela skärmen.

Olika sätt att sträcka ut bakgrundsbilden till bredden av fönstret

Vi representerar vår skärm i form av en procentsats. Det visar sig att hela bredden och längden av skärmen kommer att vara 100% x 100%. Vi måste sträcka ut bilden till denna bredd. Lägg till bildfilen inspelnings style.css linje som kommer att sträcka bilden över hela bredden och längden på bildskärmen. Som det står skrivet i CSS stil? Det är enkelt!

kropp

{

Bakgrund: url (Images / picture.jpg)

bakgrund-storlek: 100%; / * Detta inlägg är lämplig för de flesta moderna webbläsare * /

}

Så vi räknat ut hur man gör en bild bakgrund i html på skärmen. Det finns också en metod för inspelning i index.htm-filen. Även om denna metod och föråldrad, men för nybörjare är det nödvändigt att känna till och förstå. Taggen (huvud) (stil) div {background-size: täcka; } (/ Style) (/ huvud), denna post innebär att vi allokera en särskild enhet för bakgrunden, vilket kommer att placeras över hela bredden av fönstret. Vi har övervägt två sätt, hur man gör en bakgrundsbild html webbplats, så att bilden sträcks till hela bredden på skärmen i någon av de moderna webbläsare.

Hur man gör en fast bakgrund

Om du väljer att använda en bild som bakgrund för den framtida webbresurs, så du behöver bara veta hur man gör det fasta, så att den inte sträcks i längd och inte förstöra det estetiska utseendet. Helt enkelt genom att använda HTML-kod för att registrera ett litet tillägg. Du måste lämna style.css att lägga till en fras efter bakgrunds: URL (Images / picture.jpg) fast; eller i stället tillsättes efter semikolon separat rad - läge: fast. Således kommer bakgrundsbild fastställas. Under rullning innehåll på webbplatsen, kommer du se att textrader flyttar, men bakgrunden förblir på plats. Så du lärt sig hur man gör html bakgrundsbild, på flera sätt.

Arbeta med tabeller i HTML

Många oerfarna webbutvecklare, inför tabeller och block, ofta inte förstår hur man gör html bildens bakgrund bord. Liksom alla lag HTML och CSS-format, är språket webbprogrammering ganska enkel. Och lösningen på detta problem är att skriva ett par rader kod. Du bör redan vet att skriva en tabell med rader och kolumner, respektive, vilket framgår av taggarna (TR) och (TD). För att göra bakgrunden i tabellen i form av en bild, är det nödvändigt att lägga till taggen (tabell), (tr) eller (td) en enkel fras med hänvisning till referensbilden: bakgrunds = URL bilder. För tydlighetens skull ger vi ett par exempel.

Bord med en bild i stället för bakgrunden: HTML exempel

Rita en 2x3 tabell och gör det bakgrundsbilden lagras i mappen "Bilder": (tabell bakgrund = "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) (/ table). Så vårt bord kommer att dras i bakgrunden på bilden.

Nu dra samma platt storlekar av 2x3, men sätta in en bild i kolumnerna numrerade 1, 4, 5 och 6. (tabell) (tr) (td bakgrund = "Bilder / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td bakgrund = "Bilder / picture.jpg") 4 (/ td) (td bakgrund = "Bilder / picture.jpg") 5 ( / td) (td bakgrund = "Images / picture.jpg") 6 (/ td) (/ tr) (/ table). Efter att ha sett att vi kan se att bakgrunden visas endast i de celler där vi registrerade, och inte hela tabellen.

Kompatibilitet med olika webbläsare site

Det är en sådan sak som ett kompatibilitetswebbresurs olika webbläsare. Detta innebär att din webbplats är lika väl visas i olika typer och versioner av webbläsare. Det ska vara HTML-kod och CSS-format för att anpassa ett nödvändigt webbläsare. Dessutom i den moderna eran av smarta telefoner, är många webbutvecklare försöker skapa platser och anpassad för mobilversion och en dator utseende.