Redeplads: hvordan man laver baggrundsbilledet html

Mange uerfarne webdesignere, blot for at dykke ned i essensen af skabelsen af lokaliteter, ofte spekulerer på, hvordan at gøre html baggrundsbillede. Og hvis nogle af dem kan beskæftige sig med dette problem, er det stadig et problem på det tidspunkt, strække hele bredden af billedet på skærmen. Samtidig vil jeg gerne se det sted, vises ens på alle browsere, så det bør opfylde kravene i cross-browser. Du kan indstille baggrunden på to måder: ved at bruge HTML-tags og CSS. Hver for sig selv vælger den bedste løsning. Selvfølgelig, CSS stil er meget mere praktisk, fordi dens kode er gemt i en separat fil og ikke optager ekstra højttalere i de vigtigste webstedets tags, men lad os først betragte en simpel metode til installation af billedet på baggrund af sitet.

Grundlæggende HTML-koder til at skabe baggrunden

Så vi går på spørgsmålet om, hvordan man kan gøre baggrundsbilledet i html på skærmen. For at se smuk websted, skal du forstå en temmelig vigtig detalje: det er nok bare at lave en gradient baggrund eller male det en fast farve, men hvis du har brug for at indsætte baggrundsbilledet, vil det ikke strække den fulde bredde af skærmen. Billedet var oprindeligt nødvendigt at samle op eller lave dit eget design med denne udvidelse, hvor du vil vise side af sitet. Først når baggrundsbilledet er klar, skal du trække det ind i en mappe med navnet «Billeder». I det, vil vi gemme alle de anvendte billeder, animationer og andre grafiske filer. Denne mappe skal placeres i rodmappen med alle dine html-filer. Nu kan du gå videre og til koden. Der er flere muligheder for at skrive kode, hvorved baggrunden vil ændre billedet.

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

Som i HTML at gøre baggrundsbilledet, du beslutter dig for, men jeg vil gerne sige et par ord om, hvordan det ville være det mest optimale. Den første metode er ved at skrive gennem et tag attribut har længe været forældet. Den anden mulighed bliver brugt meget sjældent, fordi det viser sig, at en masse af den samme kode. En tredje mulighed er den mest almindelige og effektive. Her er eksempler på HTML-tags:

1. Den første indspilning metode gennem tag attribut (kroppen) i index.htm fil. Den opbevares i denne form: (organ baggrund = "folder_name / Nazvanie_kartinki.rasshirenie") (/ organ). Det vil sige, hvis vi har et billede med titlen «Picture» og udvidelse JPG, og mappen vi navngivet «Billeder», derefter HTML-kode post vil se sådan ud: (krop baggrund = "Images / billede.jpg") ... (/ krop) .
2. Den anden metode indebærer optagelse af et CSS stil, men det er skrevet i den samme fil med navnet index.htm. (Body style = "baggrund: url ( '../ billeder / billede.jpg')").
3. Den tredje metode til optagelse er lavet i to filer. Dokumentet med navnet index.htm tag (hoved) er skrevet sådan linje: (hoved) (link rel = "stylesheet" type = "text / css" href = "http: // site / artikel / 193.110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ dyr). En fil kaldet style.css stil allerede skriver: body {baggrund: url (billeder / billede.jpg ')}.

Som i HTML at gøre baggrundsbilledet, vi forstår. Nu skal du finde ud af at strække billedet tværs af bredden af hele skærmen.

Måder at strække baggrundsbilledet til bredden af vinduet

Vi repræsenterer vores skærm i form af en procentdel. Det viser sig, at hele bredden og længden af skærmen vil være 100% x 100%. Vi er nødt til at strække billedet til denne bredde. Tilføj til billedfilen optagelse style.css linje, der vil strække billedet over hele bredden og længden af skærmen. Som der er skrevet i CSS stil? Det er simpelt!

krop

{

baggrund: url (billeder / billede.jpg ')

baggrund-size: 100%; / * Dette indlæg er velegnet til de fleste moderne browsere * /

}

Så vi regnet ud, hvordan man laver et billede baggrund i html på skærmen. Der er også en metode til registrering i index.htm-filen. Selvom denne metode og forældet, men for begyndere er det nødvendigt at kende og forstå. Koden (hoved) (stil) div {background-størrelse: dække; } (/ Style) (/ dyr), denne rekord betyder, at vi allokere en særlig enhed til baggrunden, som vil være placeret over hele bredden af vinduet. Vi har overvejet to måder, hvordan man laver et baggrundsbillede html hjemmeside, således at billedet strækkes til hele skærmens bredde i nogen af de moderne browsere.

Hvordan man laver en fast baggrund

Hvis du beslutter at bruge et billede som baggrund for den fremtidige web-ressource, så du skal bare vide, hvordan man kan gøre det fast, så det ikke strækkes i længden og ikke ødelægge det æstetiske udseende. Blot ved hjælp af HTML-kode til at registrere en lille tilføjelse. Du er nødt til at indgive style.css at tilføje en sætning efter baggrund: url (Billeder / billede.jpg ') fast; eller i stedet tilsættes efter semikolon separat linje - position: fast. Således vil dit tapet fastsættes. Under rulning indhold på webstedet, vil du se, at teksten linjer bevæger, men baggrunden forbliver på plads. Så du har lært, hvordan man gør html baggrundsbillede, på flere måder.

Arbejde med tabeller i HTML

Mange uerfarne webudviklere, konfronteret med borde og blokke, ofte ikke forstår hvordan man kan gøre html baggrundsbilledet bord. Ligesom alle hold HTML og CSS, web programmeringssprog den er forholdsvis enkel. Og løsningen på dette problem er at skrive et par linjer kode. Du bør allerede ved, at skrive et bord af rækker og kolonner, henholdsvis, som angivet med tags (TR) og (TD). For at gøre baggrunden af bordet i form af et billede, er det nødvendigt at tilføje til tag (tabel), (tr) eller (td) en enkel sætning med henvisning til referencen billedet: baggrund = URL billeder. For klarhedens skyld giver vi et par eksempler.

Tabel med et billede i stedet for baggrunden: HTML eksempler

Tegn en 2x3 tabel og gøre det baggrundsbilledet er gemt i mappen "Billeder": (tabel baggrund = "Images / billede.jpg") (tr) (td) 1 (/ TD) (td) 2 (/ TD) (td) 3) (/ TD) (/ tr) (tr) (td) 4 (/ TD) (td) 5 (/ TD) (td) 6 (/ TD) (/ tr) (/ tabel). Så vores bord vil blive trukket i baggrunden af billedet.

Nu drage de samme plade størrelser af 2x3, men indsætte et billede i kolonnerne nummereret 1, 4, 5 og 6. (tabel) (TR) (td baggrund = "Images / billede.jpg") 1 (/ TD) (td) 2 (/ TD) (td) 3 (/ TD) (/ tr) (tr) (td baggrund = "Images / billede.jpg") 4 (/ TD) (td baggrund = "Billeder / billede.jpg") 5 ( / td) (td baggrund = "Billeder / billede.jpg") 6 (/ td) (/ tr) (/ table). Efter at have set kan vi se, at baggrunden vises kun i de celler, hvor vi registrerede, og ikke hele tabellen.

Cross-browser kompatibilitet websted

Der er sådan en ting som en cross-browser kompatibilitet web-ressource. Det betyder, at dit websted lige er godt vises i forskellige typer og versioner af browsere. Det bør være HTML-kode og CSS til at tilpasse et nødvendigt browsere. Desuden er der i den moderne æra af smartphones, mange webudviklere forsøger at oprette websteder og tilpasset til mobil version og en computer look.