Hekke: hvordan å lage bakgrunnsbildet html

Mange nybegynnere web-designere, bare for å gå i dybden av essensen av etableringen av nettsteder, ofte lurer på hvordan du gjør html bakgrunnsbilde. Og hvis noen av dem kan håndtere dette problemet, er det fortsatt et problem på den tiden til å strekke hele bredden av bildet på skjermen. Samtidig vil jeg gjerne se stedet vises identisk på alle nettlesere, slik at det skal oppfylle kravene i kryss-nettleser. Du kan stille bakgrunnen på to måter: ved hjelp av HTML-koder og CSS-stiler. Hver for seg selv velger det beste alternativet. Selvfølgelig er CSS stil mye mer praktisk, fordi koden er lagret i en egen fil, og tar ikke opp ekstra høyttalere i hovedstedets koder, men først la oss vurdere en enkel metode for å installere bildet på bakgrunn av nettstedet.

Grunnleggende HTML-koder for å lage bakgrunnen

Så går vi til spørsmålet om hvordan å lage bakgrunnsbilde i html på skjermen. For å se vakre området, må du forstå en ganske viktig detalj: det er nok bare å lage en gradient bakgrunn eller male det en farge, men hvis du trenger å sette inn bakgrunnsbilde, vil den ikke strekke hele bredden av skjermen. Bildet var opprinnelig nødvendig å plukke opp eller lage din egen design med denne utvidelsen, der du vil vise side av nettstedet. Bare når bakgrunnsbildet er klar, dra den inn i en mappe som heter «Bilder». I det, vil vi lagre alle brukte bilder, animasjoner og andre grafiske filer. Denne mappen skal plasseres i rotkatalogen med alle dine html-filer. Nå kan du gå videre og til koden. Det finnes flere alternativer for å skrive kode, der bakgrunnen vil endre bildet.

1. Skriv tag attributt.
2. Gjennom CSS stil i HTML-koden.
3. Skriv CSS-stiler i en egen fil.

Som i HTML for å gjøre bakgrunnsbilde, du bestemmer, men jeg vil gjerne si noen ord om hvordan det ville være det mest optimale. Den første metoden er ved å skrive inn en kode attributt har lenge vært foreldet. Det andre alternativet brukes svært sjelden, fordi det viser seg at mye av den samme koden. Et tredje alternativ er den vanligste og effektive. Her er eksempler på HTML-kodene:

1. Den første innspillingsmetode gjennom kodeattributt (legeme) i index.htm fil. Den er lagret i denne form: (kropps bakgrunn = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). Det vil si, hvis vi har et bilde med tittelen «bilde» og utvidelse JPG, og mappen vi kalt «bilder», deretter HTML-kode oppføring vil se slik ut: (body bakgrunn = "Bilder / Picture.jpg") ... (/ body) .
2. Den andre metoden innebærer innspilling av et CSS-stil, men det er skrevet i samme fil med navnet index.htm. (Body style = "bakgrunn: url ( '../ Images / Picture.jpg')").
3. Den tredje metoden for opptak er gjort i to filer. Dokumentet med navnet index.htm tag (hode) er skrevet slik linje: (leder) (link rel = "stylesheet" type = "text / css" href = "http: // side / artikkel / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ hode). En fil som heter style.css stil allerede skrive: body {background: url (Images / Picture.jpg ')}.

Som i HTML for å lage bakgrunnsbilde, forstår vi. Nå må du finne ut hvordan du strekke bildet langs bredden av hele skjermen.

Måter å strekke bakgrunnsbildet til bredden av vinduet

Vi representerer vår skjerm i form av en prosentandel. Det viser seg at hele bredden og lengden av skjermen vil være 100% x 100%. Vi trenger å strekke bildet til denne bredden. Legg til bildefilen opptak style.css linje som vil strekke bildet over hele bredden og lengden av skjermen. Som det står skrevet i CSS-stil? Det er enkelt!

kroppen

{

bakgrunn: url (Images / Picture.jpg ')

Bakgrunnen-størrelse: 100%; / * Dette innlegget er egnet for de fleste moderne nettlesere * /

}

Så vi fant ut hvordan å lage et bilde bakgrunn i html på skjermen. Det er også en metode for å ta opp i index.htm filen. Selv om denne metoden og utdatert, men for nybegynnere er det nødvendig å vite og forstå. Brikken (hode) (type) div {bakgrunn-størrelse: deksel; } (/ Stil) (/ hode), betyr dette at vi posten tildele en særskilt enhet for bakgrunnen, som kommer til å ligge over hele bredden av vinduet. Vi har vurdert to måter, hvordan lage et bakgrunnsbilde html området, slik at bildet blir strukket til hele bredden på skjermen i noen av de moderne nettlesere.

Hvordan lage en fast bakgrunn

Hvis du velger å bruke et bilde som bakgrunn for fremtiden web ressurs, så du trenger bare å vite hvordan du gjør det løst, slik at det ikke er strukket i lengde og ikke ødelegge det estetiske utseende. Bare ved hjelp av HTML-kode for å registrere et lite tillegg. Du må filen style.css å legge til en setning etter bakgrunn: url (Images / bilde.jpg) fast; eller i stedet tilsettes etter semikolon separat linje - stilling: fast. Dermed vil tapet bli løst. Under rulle innhold på nettstedet, vil du se at teksten linjer er i bevegelse, men bakgrunnen er fortsatt på plass. Så du har lært hvordan du gjør html bakgrunnsbilde, på flere måter.

Arbeide med tabeller i HTML

Mange uerfarne webutviklere, møtt med bord og blokker, ofte ikke forstår hvordan å lage html bildebakgrunn tabellen. Som alle lag HTML og CSS-stiler, er web-programmeringsspråk ganske enkel. Og løsningen på dette problemet er å skrive et par linjer med kode. Du bør allerede vet at det å skrive en tabell med rader og kolonner, henholdsvis, som angitt av tags (TR) og (TD). For å gjøre bakgrunnen på bordet i form av et bilde, er det nødvendig å legge til tag (tabell), (tr) eller (td) en enkel setning med referanse til referansebildet: bakgrunn = URL bilder. For klarhet, gir vi et par eksempler.

Tabell med et bilde i stedet for bakgrunnen: HTML eksempler

Tegn en 2x3 tabell og gjøre det til et bakgrunnsbilde som er lagret i mappen "bilder": (tabell bakgrunn = "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) (/ tabell). Så vårt bord vil bli trukket i bakgrunnen av bildet.

Nå trekker den samme platen størrelser av 2x3, men setter inn et bilde i kolonnene er nummerert 1, 4, 5 og 6. (tabell) (TR) (td bakgrunn = "bilder / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td bakgrunn = "bilder / Picture.jpg") 4 (/ td) (td bakgrunn = "Bilder / Picture.jpg") 5 ( / td) (td bakgrunn = "Bilder / picture.jpg") 6 (/ TD) (/ TR) (/ tabell). Etter å ha sett kan vi se at bakgrunnen vises bare i de cellene hvor vi registrerte, og ikke hele tabellen.

Kryss-nettleser kompatibilitet stedet

Det er slikt som en kryss-nettleser kompatibilitet web ressurs. Dette betyr at nettstedet ditt er like godt vises i ulike typer og versjoner av nettlesere. Det bør være HTML-kode og CSS-stiler til å tilpasse et nødvendig nettlesere. Videre, i den moderne æra av smarttelefoner, er mange webutviklere prøver å opprette områder og tilrettelagt for mobil versjon og en datamaskin utseende.