Sådan laver du en billed baggrund i HTML og CSS. 3 enkle måder

Indstiller farven på bagsiden ud af paletten. Farven på arvingen falder altid sammen med forfædres farve.
Vær hilset. I denne artikel vil jeg gerne fortælle om tre måder at placere et billede som en baggrund af hele siden ved kun at bruge HTML + CSS (uden brug af JS).

Vær hilset. I denne artikel vil jeg gerne fortælle om tre måder at placere et billede som en baggrund af hele siden ved kun at bruge HTML + CSS (uden brug af JS).

Så kravene til baggrundsbilledet vi er som følger:

  • 100% Bredde og sider Højde dækket
  • Baggrundsskalaerne om nødvendigt (baggrunden strækkes eller komprimeres afhængigt af skærmens størrelse)
  • Indsæt proportionerne af billederne (billedforhold)
  • Billede centreret på siden
  • Baggrunden forårsager ikke ruller
  • Løsningen er maksimalt CrossBrawser
  • Ingen andre teknologier anvendes undtagen CSS

Indstiller farven på bagsiden ud af paletten. Farven på arvingen falder altid sammen med forfædres farve.

Metode 1.

Efter min mening er det den bedste måde, fordi det er det nemmeste, koncise og moderne. Det bruger CSS3-ejendommen Baggrundsstørrelse. som vi anvender på mærket Html. . Nemlig Html. , men ikke Legeme. fordi Dens højde er større end eller lig med højden af ​​browservinduet.

Installer en fast og centreret baggrund, og juster derefter dens størrelse ved hjælp af Baggrundsstørrelse: Dæk .

Html { 

Baggrundsbillede: URL (Billeder / Background.jpg);

BAGGRUND-Gentag: NO-Gentag;

Baggrundsstilling: Centercenter;

Baggrundstilstand: Fast;

-Webkit-baggrundsstørrelse: Dæk;

-Moz-baggrundsstørrelse: Dæk;

-O-Baggrundsstørrelse: Dæk;

Baggrundsstørrelse: Dæk; 
} 

Demo.

Denne metode virker i

  • Chrome (enhver version)
  • Opera 10+.

Firefox 3.6+

Safari 3+.

Dvs 9+

For at billeder skal indlæses hurtigt, skal du kun placere dine websteder fra dokumenterede hostingudbydere, for eksempel, 
Brugere og søgemaskiner elsker hurtige steder. 

Baggrundsbillede: URL (Billeder / Background.jpg);

Metode 2.

Denne metode tilvejebringer brugen af ​​IMG-elementet, hvis størrelse vil variere afhængigt af størrelsen af ​​browservinduet. For at strække billedet til den fulde skærm, skal det indstille min-højde og bredde med en værdi på 100%. Og så billedet ikke komprimeres til den mindre størrelse end originalen, installer min bredde med værdien af ​​lige bredde af billedet.

Hvis vinduesbredden er mindre end billedets bredde, vil medieforespørgslen blive brugt til at justere baggrunden i midten.

arve.

<img src = "/ billeder / background.jpg" class = "baggrund" />

img.background { Min-højde: 100%; Min bredde: 640px; Bredde: 100%; Højde: Auto;

Position: Fast; TOP: 0; Venstre: 0;

/ * Afhænger af størrelsen af ​​billedet * /

@Media skærm og (max bredde: 640px) { img.bg { и Venstre: 50%; Margin-venstre: -320px; } } } Demo.

Inherits alle egenskaber ved moderselskabet

Denne metode virker i:

Eventuelle versioner af gode browsere (Chrome, Opera, Firefox, Safari) Dvs 9+ и Metode 3. . En anden måde er som følger: Fix billedet <img /> til øverste venstre hjørne af siden og stræk det ved hjælp af min-bredde og min højhøjde egenskaber på 100%, samtidig med at billedforholdet opretholdes. Sandt nok, med denne tilgang, er billedet ikke centreret. Men dette problem løses af indpakket billedet i <DIV />, som vi laver 2 gange størrelsen af ​​vinduet. Og selve billedet strækker vi og sætter i centrum. <div class = "baggrund"> <img src = "/ billeder / background.jpg" />

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

Top: -50%;

Venstre: -50%; } Bredde: 200%; Højde: 200%; }

img { Position: absolut; TOP: 0;

Venstre: 0; Højre: 0; :

Bund: 0;

Margin: Auto; Minbredde: 50%; Min-højde: 50%; } .

Denne metode virker i gode browsere og dvs. 8+.

Jeg håber, at disse oplysninger vil være nyttige for dig. Personligt bruger jeg ofte disse metoder, især først. Der er sikkert andre måder at sætte et billede på bagsiden med CSS. Hvis du ved om dem, skal du dele, kommentarer. Indstil baggrundsfarve og / eller et billede til en side eller en separat vare er simpel nok. Det vigtigste er at vide, hvor og hvordan det kan gøres, såvel som at have en farvekode og / eller et baggrundsbillede. Det er muligt, at fra denne artikel vil du lære en masse nye ting, men jeg skabte det specifikt for begyndere. Derfor vil alt være så kort som muligt og i detaljer samtidigt. Det vigtigste er, at du ikke kun vil modtage de overordnede præsentations- og færdige eksempler, men også at forstå, hvordan man laver en baggrund i HTML. For at indstille baggrunden i HTML skal du bruge mellemproduktet DOCTYPE Og jeg vil starte med det faktum at HTML5. Der er ingen mulighed for at indstille baggrunden for webstedet. Denne funktion blev besluttet at udholde i CSS. Derfor, hvis du planlægger at bruge nedenfor, og du vil få en gyldig » (korrekt) Kode, du skal bo på overgangstypen af ​​dokumentet. For at gøre dette skal din webside starte med følgende linje: <! DOCTYPE HTML Public "- // W3C // DTD HTML 4.01 » Transitionering // da "" http://www.w3.org/tr/html4/loose.dtd ">

Tid til praktiske klasser

Hvordan er baggrunden på en webside? (#)Hvis du regnede med det ud, lad os forstå, hvordan baggrunden er oprettet. Og det første her skal bemærkes - dette er forskellen mellem

Baggrundsfarve

Baggrundsbillede billede

. I begyndelsen går det

Baggrundsfarve Venstre: 50%; som oversvømmer alle tilgængelige siderum eller dets element. Den gentagne oven på den Baggrundsbillede billede }

. Visuelt kan dette afbildes som følger: Position: absolut; TOP: 0;

Baggrund for HTML-dokument og dets elementer

Efter skuffende hovedelementerne i baggrundenskontrollen, såvel som deres egenskaber, fortsæt direkte til analysen af ​​et bestemt eksempel. I programkoden vist nedenfor forsøgte jeg at aktivere alle beskrevne elementer.

Den anden ting du har brug for at vide, er forskellen mellem

Dokumentets krop Højre: 0; :

element af dokumentet

Dokumentets krop

angivet i HTML-koden på websidenummeret

Legeme. som omfatter alt indholdet af websiden. Selvfølgelig kan baggrunden for dokumentets dokument ikke være gennemsigtigt. Hvis baggrunden for dokumentets krop ikke er angivet, bruges standardværdien angivet i browserindstillingerne. Sideelementer er inde i mærket }

. Det er bemærkelsesværdigt, at du kan indstille farven og / eller baggrundsbilledet ved hjælp af HTML til alle elementer i dokumentet. For eksempel kan baggrundsbilledet kun angives for tabeller. Som standard har de normalt en gennemsigtig baggrund. Position: absolut; TOP: 0;

Attribut BGColor for at skabe baggrundsfarve

For at spørge

Dokumentet eller dets elementer bruges attribut Højde: 200%; и Baggrundsbillede billede bgcolor. , f.eks: <Body bgcolor = "# ec008c">

<! - Dokumentlæge ->

</ Body>

I dette tilfælde sætter vi baggrundsfarven for siden som helhed. Men et eksempel på, hvordan du indstiller baggrundsfarven til bordet, i tagget Bord <TABEL BGCOLOR = "# EC008C"> <tr> <td> Tekst med baggrund </ td> </ tr> </ tabel>

Det er bemærkelsesværdigt, at baggrundsfarven i tabellen også kan angives til rækker i taggen

TRR. Og for deres celler i tagget Td.

Sådan Find ud af farvekoden? Du har sandsynligvis allerede bemærket, at farven i HTML er sat til speciel kode Html. , f.eks:

# EC008C.

  • . For at finde ud af koden har du brug for den farve, du kan bruge en af ​​grafikredaktørerne. For eksempel kan du i Photoshop bruge "
  • Eyedropper værktøj.
  • (Pipette)

For at få en farve fra et punkt på billedet. Derefter skal du klikke på den resulterende farve på værktøjslinjen og i vinduet, der åbnes "

Farve picker. (Farvevalg) Kopier farvekode. Jeg gør opmærksom på, at denne kode vil være uden et gittertegn I starten skal dette tegn tilføjes manuelt.

Du kan også bruge mange onlinetjenester, for eksempel: 
Deres princip om arbejde er endnu nemmere - klik på den ønskede farve og få it-kode. Attribut baggrund for at oprette et baggrundsbillede Såvel som i tilfælde af baggrundsfarve og i tilfælde af
Du skal bruge en særlig egenskab, nemlig 
baggrund. 
<body baggrund = "/ 2014/06 / bg.jpg">

В Html. I dette tilfælde spørger vi baggrundsbilledet for siden som helhed. Det er bemærkelsesværdigt, at det på grund af begrænsningerne af billedets størrelse gentages, for eksempel: Når du ser, når gentagelse, er overgangen mellem billederne mærkbar. Derfor bruges der ofte specielle billeder, hvor dette øjeblik tages i betragtning. Men et eksempel på, hvordan man indstiller et baggrundsbillede til et bord, i tag

<Table Background = "/ 2014/06 / bg.jpg"> <tr> <td> Text med baggrund </ td> </ tr> </ tabel> Html. Det er bemærkelsesværdigt, at baggrundsbilledet kun kan indstilles til bordet som helhed og / eller dets separate celle. For en streng vil det ikke fungere. Attribut baggrund for at oprette et baggrundsbillede .

Absolut og relativ vej til baggrundsbilledet (Farvevalg) Særskilt værd at betale opmærksomhed Adresse baggrundsbillede . I dette tilfælde anvendes den relative vej til billedet, dvs. Adressen er angivet på placeringen af ​​billedfilen til websidefilen. Denne mulighed kan ikke kaldes særligt vellykket. Det er bedst at bruge den absolutte vej til billedet, dvs.

dens fulde url. <body baggrund = "/ billeder / bg.jpg"> .

I dette tilfælde vil du ikke have samtidige problemer. For mere om det kan du læse her.

Lad os opsummere 
Ved hjælp af attributter moralsk forældet, fordi for gyldigheden af ​​HTML-koden skal du bruge overgangsbestemmelserne DOCTYPE.

. For at indstille baggrundsfarven i HTML bruger specialkoder, som du kan finde ud af i en grafisk editor eller ved hjælp af specielle onlinetjenester. Baggrundsbilledet duplikeres i halerne af området tildelt og ligger oven på baggrundsfarven. For at angive et baggrundsbillede er det bedre at bruge sin fulde webadresse. Jeg har alt på dette. Tak for opmærksomheden. Held og lykke!

Kort link: http://goo.gl/03tsnz Hvordan laver man en baggrund for webstedet? Ethvert værelse vil se meget bedre ud, hvis hendes gulv stiger kære persisk tæppe. Så jo værre dit websted? Måske er det tid og hans gulv " sæt
  • »Dyrt elegant håndlavet palads. Vi vil forstå mere om, hvordan man laver en baggrund for webstedet:
  • Det sker, at det gamle design af webstedet allerede er kommet. Og jeg vil have noget nyt og velsmagende. Og det nye design vil være sådan, hvis du koger det med dine egne hænder.
  • Men for at ændre helt alle design af ressourcen selv - det er utaknemmeligt. Ja, og ikke alle har noget ved dette. "
  • skærpet.

"Hænder. Derfor er det nemmest at opdatere den gamle skabelon, ændre farven på baggrunden for ressourcen eller dens baggrundsbillede.

Der er flere måder at ændre baggrunden på webstedet. Dette bruger muligheder. 
CSS. eller . Men mange af ejendommene til at arbejde med baggrunden har samme navn og metodologi af applikation i disse webteknologier.
  • Som baggrund kan du bruge flere elementer: Farve; ;
  • Baggrundsbillede;
  • Textural image. Vi vil håndtere brugen af ​​hver af dem mere detaljeret. For at indstille farven på bagsiden for webstedet, bruges ejendommen.

baggrundsfarve.

Stilattribut. 

Stil. . Det vil sige at indstille den grundlæggende farve til websiden, skal du registrere det i <BODY> TAG. For eksempel: <Body Style = "Baggrundsfarve: # 55D52B"> <p> Baggrund for webstedet # 55D52B </ p> </ body>

Ud over hexadecimal farvekode understøttes værdien i søgeordsformatet eller

Rgb. 

. Eksempler:

<Body style = "Baggrundsfarve: RGB (51,255,153)"> <p> Baggrund for RGBs hjemmeside (23.113,44) </ p> </ body> <Body style = "Baggrundsfarve: grøn"> <p> Baggrund for den grønne hjemmeside </ p> </ body> Indstilling af baggrundsfarve ved hjælp af søgeord har en række begrænsninger i forhold til de resterende to måder.

I alt 16 søgeord understøttes til at indstille farve. Her er nogle af dem:

Hvid, rød, blå, sort, gul Andet. Derfor for at indstille baggrunden for webstedet

Det er bedre at bruge hexadecimalt format eller 

Ud over at vælge Farve er andre indstillinger tilgængelige. Hvis ejendommen Indstil værdi. Gennemsigtig

Baggrunden for siden bliver gennemsigtig. Denne værdi er som standard tildelt denne ejendom. Overvej nu muligheden for et hypertekstsprog for at installere baggrundsmønsteret for webstedet. Det er muligt at gøre det ved hjælp af ejendommen. baggrundsbillede.

Eksempel: 

<Body Style = "Baggrundsbillede: URL (IMG_1809.jpg)"> </ body>

Som det fremgår af koden, forekommer billedbindingen gennem stien

URL.

Bogført i parentes. Men ikke alle billeder viser sig at være så store for at fylde hele området på skærmen med deres størrelser. Lad os se, hvordan den mindre figur vil blive vist.

Antag at vi udvikler et websted om poesi, og som et substrat skal du bruge billedet af Pegasus. Den vingede hest vil personificere friheden for kreativ tanke på digteren!

Vi har brug for, at billedet vises i midten af ​​skærmen en gang. Men desværre forstår browseren ikke vores sublime ønsker. Og viser et mindre billede til baggrunden for webstedet så mange gange som skærmområdet kan rumme:

Sandsynligvis fire smilende heste med vinger af digtere vil være for meget til inspiration. Derfor forbyde kloning af vores Pegasus. Gør det ved hjælp af ejendommen

baggrundsrepræsentation. . Mulige værdier: Gentag-X - Gentagelse af baggrundsbilledet vandret;

Så vi letter opgaven at sætte bagsiden fra to billeder: animation og almindeligt billede. I dette tilfælde vil GIF-animationen blive rettet, og tegningen rulles sammen med indholdet på siden.

Gentag-y - lodret;

Gentag - på begge akser;

No-gentag - gentagelse er forbudt.

Blandt de angivne muligheder er vi interesserede i det sidste. Før vi ændrer baggrunden for webstedet, bruger vi det i din kode:

<Body style = "Baggrundsbillede: URL (3.jpg); Baggrundsrepræsentation: NO-Gentag"> </ body>

Men selvfølgelig er det bedre, hvis vores lette er placeret midt på skærmen. Ejendom

BAGGRUNDPOSITION. Bare er beregnet til at placere baggrundsmønsteret på siden. Indstil placeringskoordinaterne på flere måder:
. Det vil sige at indstille den grundlæggende farve til websiden, skal du registrere det i <BODY> TAG. For eksempel: Nøgleord (
<body baggrund = "/ billeder / bg.jpg"> Top, bund, center, venstre, højre)
eller Procentdele - nedtællingen begynder fra øverste venstre hjørne;
Ethvert værelse vil se meget bedre ud, hvis hendes gulv stiger kære persisk tæppe. Så jo værre dit websted? Måske er det tid og hans gulv " I måleenheder (
(Farvevalg) Pixels.
). Vi bruger den nemmeste mulighed for centrering:

<Body style = "Baggrundsbillede: URL (3.jpg); Baggrundsrepræsentant: Nej-gentagelse; Baggrundsstilling: Topcenter"> </ body>

Det sker, at du skal fastsætte tegningens position, når du ruller. Derfor, før du foretager et billede af webstedet, skal du bruge en særlig ejendom.

baggrundsophæftet fil.

. Gyldige værdier: <ul> <li> Rul; </ li> <li> fast. </ Li> </ ul>

Vi har brug for den sidste betydning. Nu vil koden for vores eksempel se sådan ud: [/ HTML] 
<body style = "Baggrundsbillede: URL (3.jpg); Baggrundsrepræsentation: Nej-gentag; Baggrundsstilling: Topcenter; Baggrundstilstand: Fast"> </ Body> 

I det første eksempel, for baggrunden brugte vi et stort og smukt ørkenlandskab. Men for sådan skønhed skal du betale fuld. Vægten af ​​billedet udført i høj kvalitet kan nå flere megabyte.

Dette volumen påvirker ikke downloadhastigheden på browsersiden med højhastighedsforbindelse med internettet. Men hvad med mobilt internet, når du bruger, hvilken download af flere "

meter.

"Vil tage meget tid?

"Vil tage meget tid? Alle disse problemer løses ved hjælp af en tekstur baggrund. Det bruger et lille billede som et mønster af tekstur. Selv under forudsætning af dens multiple gentagelse er mønsteret kun én gang.

At skabe en mørk baggrund for webstedet gå til Legeme. Photoshop. Legeme. , Opret et billede i form af en strimmel af en lang 1200 pixel, og en bredde på 15 pixels. Derefter bruger vi en simpel sort / hvid gradient og forbinder den resulterende tekstur til webstedssiden:

<Body Style = "Baggrundsbillede: URL (1.png); Farve: RGB (0,51,204)"> </ body>

For klarhed tilføjede vi tekst og sæt det farve ved hjælp af ejendommen. Legeme. Farve Legeme. . Det er der skete:

  • Højde: 200%; Alle ovenfor beskrevne egenskaber gælder også for cascading stilark. Opret en baggrund af webstedet
  • Baggrundsbillede billede CSS.
  • Ved at omskrive koden for et af vores tidligere eksempler: <Head> <titel> Dokument Untitled </ titel> <Style Type = "TEXT / CSS"> BODY {BAGGRUND-IMAGE: URL (3.jpg); Baggrundsrepetning: Nej-gentagelse; BAGGRUNDPOSITION: TOP CENTER; BAGGRUND-Vedhæftning: Fast;} </ Style> </ head> <body> </ body>
  • Resultatet vil være ens. Nå, vi kiggede på alle mulighederne, hvordan man ændrer baggrunden på webstedet. Nu forbliver det kun for at skabe en tegning af fremtidens tæppe og sprede det på siderne i din ressource. Men det er din hånd.
  • God dag til alle at lære og lære noget nyt! Har du nogensinde været opmærksom på udseendet af websteder, når de udvikler skaberne, har været doven for at arrangere baggrunden for sider? Og jeg vendte mig om. Det ser slagtning ud. Ofte, på grund af manglen på sædvanlige adskillelser mellem forskellige typer af oplysninger, blandes det og simpelthen forsvinder ønsket om at se yderligere på en sådan webressource. Så at sådanne problemer skete med dit projekt, besluttede jeg at skrive en artikel om emnet: "Sådan laver du en baggrund af sider i HTML." Efter at have læst publikationen vil du lære, med hvilke værktøjer du kan indstille baggrundsdesign, hvordan man laver en baggrund fast eller ændret og meget mere, hvilket vil hjælpe med at gøre dit websted attraktivt. Lad os nu starte!
  • Grundlæggende værktøjer til indstilling af baggrundswebsider For at indstille baggrundsbilledet har web-sprogudviklere givet en attribut baggrund. Den er tilgængelig i både HTML og CSS.
  • På Markup-sproget er dette en egenskab af kroppen, og i stilbordene - en universel ejendom, der giver dig mulighed for at sætte op til 5 egenskaber ved den bageste plan på samme tid. Baggrunden er et ret fleksibelt element, der kan bruges til at opgave baggrunden som en farve, farvebillede eller endda animation. Så for at installere baggrundsbilledet gennem enheden HTML <BODY> er det nok til at skrive en sådan kode:
  • <Body baggrund = "filadresse"> ... </ body> Og i stedet for ordene "Filadresse" indsæt stien til billedet.
  • Men bemærk! Hvis i form af baggrunden vil du se et Monochon-lærred, der er specificeret fra farvepaletten, så gøres dette ved hjælp af BGColor-attributten. For eksempel, <body bgcolor = "# 000000"> ... </ body>, spurgte vi en sort baggrund for vores hjemmeside.
  • Farver i CSS og HTML er indstillet enten af ​​et engelsk ord (for eksempel rød) eller en særlig kode, der består af et tegn # og seks tegn efter det (for eksempel # ffdab9). Når du skriver en anden mulighed i specialiserede softwareprodukter til udviklere, vises paletten automatisk foran dig. Hvis du lige begyndte at lære disse websprog, kan farvekoden spackes på internettet.

Baggrund som ejendom i cascading stil tabeller Højde: 200%; :

Den er indstillet eller i en separat fil med CSS-stilarter eller i elementet <stil>. Med denne ejendom kan du installere baggrundsmønstre eller farve, angive startstedet på siden, indstille tilbagevendende og faste billeder. For større klarhed lavede jeg definitioner i tabellen. 

Parametre. Formål

Bruges til at installere et fast eller rullet billede sammen med indholdet af webstedet. Sker fast, rul og arve

Indstiller baggrundsbilledet. Det kan angives samtidigt med farven. Derefter vises sidstnævnte, indtil billedet er helt indlæst.

Indstiller den oprindelige placering af objektet for den foregående parameter. Horisontalt angiver højre, venstre og center og lodret - bund, top og center. Derudover kan du arve position (arve), sat i procent, pixels og andre dimensioner 

Ansøg, når du bruger Baggrundsbilledattributten. Regulerer, hvordan billedet gentages. Du kan angive 2 værdier: Til vandret og lodret. Der er egenskaber: Repeat, gentag, gentag-x, gentag-y, arve, rum

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