Hvordan legge til et bakgrunnsbilde på en nettside. Bakgrunnsbilde

For å lage en nettside er et viktig spørsmål hvordan man lager en bakgrunn i html. Denne prosedyren innebærer bruk av visse tagger - kodeord og bokstaver. Takket være dem kan du sette en annen bakgrunn, gjøre den monokromatisk - fyll den eller sette et hvilket som helst bilde i stedet for bakgrunnen. Slike handlinger vil være svært nyttige for alle layoutdesignere, og for de som bestemmer seg for å "kle opp" nettstedet sitt på egen hånd.

Lage bakgrunnen

Før du lager nettsidens bakgrunn til HTML, må du åpne den i tekstredigerer html-kode sider. Du må huske at tagger på siden er plassert vertikalt. Deretter mellom taggene … , må du sette et merke- Disse kodene er nødvendige for å tydeliggjøre stilen til elementene på en gitt nettside. På stedet tre poeng du må skrive – body (bakgrunn:) . Dette er en parameter som lar deg stille inn forskjellige stiler for sidebakgrunnen. Du kan utføre fargeinnstillingsoperasjonen på to måter. Først:

Brødtekst (bakgrunn:#000000) – sidebakgrunnen skal nå være svart.

Denne metoden egner seg også for å sette både en farge og et bilde som bakgrunn. Det er etter kolon du kan sette enten en fargekode eller en lenke til bildet. Eller du kan bruke en metode som bare betyr å angi en farge - et spesifikt fyll for siden. Etter kolon må du skrive den såkalte parameteren - farge. Og etter det, legg inn koden til selve fargen. Denne metoden er bra hvis du bruker den som en mal. Skriv den ned og lagre den, og ved behov, sett inn en farge og legg den på siden.

Du kan sette i stedet vanlig bakgrunn, bilde. Hvis du trenger å finne ut: i html, hvordan lage et bilde som bakgrunn, må lignende operasjoner gjøres. Skriv tagger, legg inn brødtekst (bakgrunn: lenke til bildet). Vi må huske at selve bildet kan være hvor som helst. Og på et nettsted på Internett, men det er best å lage en mappe i roten av dokumentet. I mappen der all informasjon om sidesiden vil bli lagret, må du opprette en annen - for bilder. Operasjonen vil se slik ut:

Nå vil bildet du har valgt være bakgrunnen for hele siden. Vi håper at du forstår hvordan du lager en bakgrunn i html. Bare prøv og alt vil definitivt ordne seg!

27.12.14 55,8K

Ethvert rom vil se mye bedre ut hvis gulvet er dekket med et dyrt persisk teppe. Så hvorfor er nettstedet ditt dårligere? Kanskje det er på tide å "dekke" gulvet med et dyrt elegant teppe selvlaget. La oss se nærmere på hvordan du lager en bakgrunn for et nettsted:

Bakgrunn for nettstedet

Det hender det gammelt design Jeg er allerede lei av siden. Og jeg vil ha noe nytt og smakfullt. EN nytt design det blir sånn hvis du koker det med egne hender.

Men å fullstendig endre hele utformingen av en ressurs på egen hånd er en utakknemlig oppgave. Og ikke alles hender er riktig trent for denne oppgaven. Derfor er den enkleste måten å oppdatere en gammel mal på å endre bakgrunnsfarge ressurs eller dens bakgrunnsbilde.

Det er flere måter å endre bakgrunnen på et nettsted. Til dette formål brukes de CSS-funksjoner eller html. Men mange av egenskapene for å jobbe med bakgrunnen har samme navn og påføringsmetode i disse webteknologiene.

Grunnleggende om å jobbe med bakgrunner i html

Flere elementer kan brukes som bakgrunn:

• Farge;
• Bakgrunnsbilde;
• Teksturbilde.

La oss se på bruken av hver av dem mer detaljert.

For å stille inn fargen bakgrunn For nettstedet brukes bakgrunnsfargeegenskapen til stilattributtet. Det vil si at for å angi hovedfargen for en nettside, må du skrive den inne i taggen . For eksempel:

Bakgrunn for nettstedet #55D52B

Unntatt heksadesimal kode farger er støttet verdi i nøkkelord eller RGB-format. Eksempler:

Nettstedsbakgrunn rgb(23,113,44)

Nettsidebakgrunn grønn

Still inn bakgrunnsfargen ved hjelp av søkeord har en rekke begrensninger sammenlignet med de to andre metodene.

HTML støtter bare 16 nøkkelord for å angi farger. Her er noen av dem: hvit, rød, blå, svart, gul og andre.

Derfor, for å angi bakgrunnen for et html-nettsted, er det bedre å bruke heksadesimalt eller RGB-format.

I tillegg til fargevalg er andre tilpasningsalternativer tilgjengelige. Hvis bakgrunnsfargeegenskapen er satt til transparent , vil bakgrunnen på siden bli gjennomsiktig. Dette er meningen denne eiendommen tildelt som standard.

La oss nå se på mulighetene til hypertekstspråket for å sette et bakgrunnsbilde for et nettsted. Dette kan gjøres ved å bruke bakgrunnsbilde-egenskapen.

Som du kan se av koden, er bildet koblet gjennom url-banen spesifisert i parentes. Men ikke alle bilder er så store at størrelsen fyller hele skjermområdet. La oss se hvordan det mindre bildet vil vises.

Tenk deg at vi utvikler et nettsted om poesi, og vi må bruke et bilde av Pegasus som bakgrunn. Den bevingede hesten vil personifisere friheten til dikterens kreative tanke!

Vi trenger at bildet vises på midten av skjermen én gang. Men dessverre forstår ikke nettleseren våre høye ønsker. Og den viser et mindre bilde for bakgrunnen til nettstedet så mange ganger som skjermområdet kan romme:

Kanskje fire smilende hester med vinger blir for mye inspirasjon for poeter. Derfor forbyr vi kloning av vår Pegasus. Vi gjør dette ved å bruke bakgrunnsgjenta-egenskapen. Mulige verdier:

• repeat-x – gjenta bakgrunnsbildet horisontalt;
• repeat-y – vertikalt;
• gjenta - på begge akser;
• ingen gjentakelse – gjentakelse er forbudt.

Blant de listede alternativene er vi interessert i den siste. Før vi endrer bakgrunnen til nettstedet, bruker vi det i koden vår:

Men det ville selvfølgelig vært bedre om flyeren vår var plassert midt på skjermen. Bakgrunnsposisjon-egenskapen er nettopp ment for å plassere bakgrunnsbildet på siden. Du kan angi plasseringskoordinater på flere måter:

• Søkeord ( topp, bunn, midt, venstre, høyre);
• Prosent – ​​telling starter fra øvre venstre hjørne;
• I måleenheter (piksler).

La oss dra nytte av det meste enkelt alternativ sentrering:

Det hender at du må fikse posisjonen til et bilde når du ruller. Derfor, før du lager et bilde som bakgrunn for nettstedet, bruk den spesielle egenskapen bakgrunnsvedlegg . Verdiene den aksepterer er:

• rulle;


• fikset.

Vi trenger den siste verdien. Nå vil eksempelkoden vår se slik ut:

Nettstedets tekstur bakgrunn

I det første eksemplet brukte vi et stort og vakkert ørkenlandskap som bakgrunn. Men du må betale fullt ut for slik skjønnhet. Vekten på bildet laget inn høy kvalitet, kan nå flere megabyte.

Dette volumet påvirker ikke på noen måte sidelastingshastigheten til nettleseren når høyhastighetsforbindelse med Internett. Men hva med mobilt internett, som vil ta lang tid å laste flere "meter"?

I dette innlegget vil jeg fortelle deg som vanlig angi bakgrunnen til nettstedet ved hjelp av HTML kode.

Jeg skal også vise deg en utmerket utenrikstjeneste på valg av sømløse bakgrunner.
I dag gjøres nettstedinnstillingene enklere og mer praktiske gjennom CMS-konsoller som WordPress.
Det kan være nødvendig å endre malene for å selge nettsider, denne artikkelen vil hjelpe med dette.

Hvis du ikke vet hva det er HTML, da kan dette generelt kalles språket til nettsteder eller et sett med regler som nettsteder genereres etter.

For eksempel ser du et bilde på en nettside, men i HTML-koden til siden kan det se slik ut:

Sett en solid farge på sidebakgrunnen.

For å installere bakgrunn i skjemaet ensfarget , må merke legg til attributt bgcolor.

< html >
< head >
< title >Side tittel.

< body bgcolor = "#ffcc00" >

Du kan denne koden sette inn i tekstfil og lagre med filtypen .html. Åpne den deretter med hvilken som helst nettleser og se resultatet.

Som du sikkert har gjettet, vises bakgrunnsfargen på grunn av fargekoden i attributtet bgcolor= "verdi", som du finner ved å følge denne lenken.

Sette et bilde til bakgrunnen på en HTML-side.

For å sett bildet til bakgrunnen, kan du bruke attributtet bakgrunn i taggen .

< html >
< head >
< title >Side tittel.

< body background = "http://сайт/images/mlmsecret.jpg" >Hallo. Dette er min første side.

Du vil kanskje legge merke til at attributtet bakgrunn tilsvarer banen til filen som brukes som bakgrunn.

For å raskt endre bakgrunnen eller et hvilket som helst bilde på siden, bare spesifiser ny måte til filen din ved hjelp av et tekstredigeringsprogram.

For å finne ut forrige vei, klikk på bildet på siden med bildet Høyreklikk og klikk på "Kopier bilde-URL." på denne måten vil du se navnet på bildet/bakgrunnen. Deretter kan du ganske enkelt erstatte det gamle bildet med ditt eget, med samme filnavn.

Dette var det enkleste grunnleggende for å sette opp bakgrunn i html, nå kommer den interessante delen. 🙂

Moderne nettlesere lar deg legge til et element vilkårlig nummer bakgrunnsbilder, som viser parameterne for hver bakgrunn atskilt med komma. Det er nok å bruke den universelle bakgrunnsegenskapen og spesifisere en bakgrunn for den først og en andre atskilt med komma.

Hvordan strekke bakgrunnen til hele vinduets bredde?

For å skalere bakgrunnen, bruk egenskapen bakgrunnsstørrelse; sett verdien til 100 %, så vil bakgrunnen oppta hele bredden av nettleservinduet. For eldre versjoner av nettlesere bør du bruke spesifikke egenskaper med prefikser, som vist i eksempel 1.

Hvordan legge til et bakgrunnsbilde på en nettside?

For å legge til et bakgrunnsbilde på en nettside, sett banen til bildet innenfor url-verdien til bakgrunnsstilegenskapen, som igjen legges til brødtekstvelgeren.

Er det mulig å lage en animert bakgrunn?

Animasjon er en ganske kraftig teknikk som kan bringe ethvert dokument til live, så det er ikke overraskende at Flash-teknologi, som legger til tegneserier på nettsider, og interaktive, har blitt ekstremt populær. Grafisk format GIF støtter også enkel animasjon ved sekvensiell endring av rammer. Så ved å bruke et bilde i dette formatet er det ikke bare mulig å animere individuelle bilder, men også bakgrunnen til en nettside eller et spesifikt element.

Først må du lage et animert bilde i GIF-format hva kan du bruke det til? Adobe-programmet Photoshop eller annet egnet for dette formålet. Det finnes også biblioteker med ferdige animerte filer som kan brukes som bakgrunnsbilde. Deretter legges bildet til som bakgrunn ved å bruke bakgrunnsstilegenskapen, som vist i eksempel 1.

Hvordan sette et bakgrunnsbilde nederst til høyre på siden?

For å kontrollere posisjonen til bakgrunnsbildet på siden, brukes; den setter samtidig de horisontale og vertikale koordinatene til bildet. For å avbryte repetisjon av et bakgrunnsbilde, bruk bakgrunnsposisjon-egenskapen med verdien no-repeat .

Hvordan kan jeg forhindre at bakgrunnen gjentar seg?

Som standard gjentas bakgrunnsbildet horisontalt og vertikalt, og danner en mosaikk over hele feltet på nettsiden. Denne bakgrunnsatferden er imidlertid ikke alltid nødvendig, spesielt når du plasserer et enkelt bilde, så å legge til en verdi uten gjentakelse til egenskapen for bakgrunnsstil vil hjelpe.

Hvordan kan jeg få bakgrunnen til å gjenta bare vertikalt?

Bakgrunnsrepetisjon er vanligvis nødvendig for å lage dekorative linjer eller gradienter som er knyttet til høyden på et nettsideelement eller vindu. I slike tilfeller gir gjentakelse av bakgrunnen vertikalt et konsistent bilde, uavhengig av størrelsen på elementene. Bare først bør du sørge for at bakgrunnsbildet gjentas uten sømmer.

Bakgrunnsfarge er nok viktig element hvilken som helst nettside. For det første setter den ønsket stemning og generell stemning på nettstedet, og for det andre letter det oppfatningen av teksten.

Bakgrunnsfargen til en nettside er satt ved å bruke bgcolor-attributtet til taggen .

Eksempel 1: Endre bakgrunnsfargen

Fargen kan angis som en heksadesimal verdi eller ved navnet.

Til tross for at du kan spesifisere hvilken som helst farge for bakgrunnen, bruker de fleste nettsteder hvit bakgrunn og svarte bokstaver, som det mest etablerte alternativet.

Bakgrunnsbilde

Du kan bruke et hvilket som helst passende bilde som bakgrunn. Bakgrunnen skal ikke distrahere oppmerksomheten fra teksten, men skal passe godt sammen fargevalg nettsider og være små i størrelse for å lastes raskt. Hvis du etter ovenstående fortsatt ønsker å legge til bakgrunnsbilde til siden, bør du bruke bakgrunnsattributtet til taggen .

Eksempel 2: Legge til et bakgrunnsbilde

Hvis bildet mindre størrelse skjerm, vil den bli gjengitt horisontalt og vertikalt.

Fordi bakgrunnsbildet laster langsommere enn bakgrunnsfargen, kan du ende opp med uleselig tekst en stund til bildene lastes inn. Det samme kan skje hvis bilder er deaktivert i nettleseren. Derfor anbefales det å alltid sette bakgrunnsfargen sammen med bakgrunnsbildet (eksempel 3).

Eksempel 3: Bruk av bakgrunnsbilde og bakgrunnsfarge

Fast bakgrunn

Som standard, når du bruker rullefeltet, flyttes bakgrunnsbildet med innholdet på nettsiden. Internet Explorer lar deg gjøre bakgrunnen urørlig ved å bruke bgproperties ="fixed " tag-attributtet .

Eksempel 4: Sette en fast bakgrunn

Ved å spesifisere bgproperties-attributtet, som vist i eksempel 4, vil bakgrunnsbildet på nettsiden forbli stasjonært, men tekst, grafikk og andre elementer vil bevege seg med rullefeltet.