I den siste artikkelen snakket vi om hvordan du endrer bakgrunnsfargen på et nettsted ved å bruke tag-attributter kropp og CSS-stiler: . Denne artikkelen vil snakke om å bruke bilder som bakgrunn på et nettsted, hvordan å strekke bakgrunnen til hele bredden av siden og fikse den.

Bilde som sidebakgrunn - HTML

La oss først vurdere metoden for å spesifisere bakgrunnsbilde på nettstedet ved å bruke attributtet bakgrunn stikkord kropp:

Her settes bakgrunnsbildet ved å bruke bakgrunnsattributtet til body-taggen.

Som i eksemplet ovenfor, anbefales det at du i tillegg til bildet også spesifiserer en bakgrunnsfarge (den vil vises på siden mens siden lastes inn), som best matcher bakgrunnsbildet og skaper kontrast til teksten på siden. For eksempel, hvis du bruker hvit tekstfarge på nettstedet ditt, bør du spesifisere en mørk bakgrunnsfarge og angi et mørkt bakgrunnsbilde. I dette tilfellet vil teksten være lett å lese.

Merk: Det anbefales å angi bakgrunnsbilde og bakgrunnsfarge ikke ved hjelp av HTML, men ved hjelp av bruker CSS. I dette tilfellet vil koden være gyldig og mer korrekt.

Bilde som sidebakgrunn - CSS

I CSS bakgrunn Den nye fargen og bakgrunnsbildet kan settes i én egenskap bakgrunn:

Her settes bakgrunnsbildet med bakgrunns-CSS-egenskapen.

Her bruker eiendommen bakgrunnsvedlegg sidebakgrunnen er fikset, og bruker egenskapen bakgrunnsgjenta horisontal repetisjon av bildet er satt. Men det er verdt å vurdere at bakgrunnsbildet skal være godt "sydd" rundt kantene.

Hvis du vil strekke bakgrunnsbildet til full størrelse av nettleservinduet, bruk egenskapen bakgrunnsstørrelse: 100 %;

I Nubex nettstedbygger kan du bruke et stort bilde som bakgrunn for et hvilket som helst nettsted og feste det.

I denne opplæringen vil vi studere i detalj teknologien for å lage et responsivt bakgrunnsbilde som vil okkupere hele visningsområdet i nettleseren til enhver oppløsning. Og vi vil bruke CSS - egenskapen for bakgrunnsstørrelse. Uten JavaScript:

EKSEMPEL
LAST NED KILDER

Eksempler på bruk av responsive bakgrunnsbilder

I dag er nettsteder der bakgrunnsbildet dekker hele det viste området på siden veldig populære.
Nedenfor er noen av disse nettstedene:

Seilkollektiv

Digital telepati

Marianne Restaurant

Hvis du ønsker å oppnå et lignende "utseende" i prosjektet ditt, er du på rett vei.

Enkle konsepter

Her er spillplanen vår.

Bruk egenskapen for bakgrunnsstørrelse for å dekke hele visningsporten

CSS-egenskapen for bakgrunnsstørrelse kan settes til å dekke . Omslagsverdien instruerer nettleseren til å automatisk og proporsjonalt skalere bakgrunnsbildet i lengde og bredde slik at det forblir lik eller større enn bredden/høyden på visningsporten.

Bruke en medieforespørsel for å få en mindre versjon av et bakgrunnsbilde for mobile enheter

For å redusere sideinnlastingstid på små skjermoppløsninger, vil vi bruke en mediespørring for å få en mindre versjon av bakgrunnsbildet. Men dette er ikke nødvendig og kan utelates. Denne teknologien fungerer utmerket uten.

Men likevel er det ingen dårlig idé å bruke mindre versjoner av bakgrunnen for mobile enheter, og jeg skal forklare hvorfor.
Bildet som skal brukes i eksemplet er omtrent 5500 x 3600 px i størrelse.

Med denne oppløsningen har vi den fordelen at vi oppnår dekning av hele visningsområdet på de fleste bredformatskjermer som produseres i dag, men ulempen er bildestørrelsen. Dette er omtrent 1,7 MB.

Å etterlate så mye plass til å laste bare et bakgrunnsbilde er ikke en god idé i alle fall, og når det gjelder mobile enheter, er det en veldig dårlig idé. I tillegg er en slik oppløsning rett og slett unødvendig på skjermer med lav oppløsning ( Jeg skal fortelle deg mer om dette senere).

Så. La oss komme i gang.

HTML

Nedenfor er alt du trenger fra markeringen:

...Innholdet på siden din...

Vi vil tilordne et bakgrunnsbilde til kroppselementet og dermed oppnå fullstendig bakgrunnsdekning.

Imidlertid vil denne teknikken fungere på alle blokkelementer (som en div eller form ). I tilfelle bredde-høyden på blokkbeholderen din er flyttbar, vil bakgrunnsbildet også endre størrelse for å fylle hele beholderområdet.

CSS

Vi erklærer egenskapene til kroppselementet som følger:

body ( /* Plassering av bakgrunnsbildet */ bakgrunnsbilde: url(bilder/bakgrunnsfoto.jpg); /* Bakgrunnsbildet er sentrert horisontalt og vertikalt */ bakgrunnsposisjon: midt i midten; /* Bakgrunnen gjentas ikke */ background-repeat: no-repeat; /* Bakgrunnen er fast i viewporten og beveger seg derfor ikke når høyden på innholdet overstiger høyden på bildet */ background-attachment: fixed; /* Denne egenskapen forårsaker bakgrunn for å endre skala når størrelsen på beholderen som inneholder endres */ background-size: cover; /* Bakgrunnsfarge som vises når et bakgrunnsbilde lastes inn */ bakgrunnsfarge: #464646; )

Den viktigste verdieiendommen i denne listen er:

bakgrunnsstørrelse: cover;

Det er verdt å ta hensyn til det. Det er her miraklet skjer. Dette verdi-egenskapsparet instruerer nettleseren om å skalere bakgrunnsbildet i slike proporsjoner at høyde-bredden forblir lik eller større enn høyde-bredden til selve elementet. ( I vårt tilfelle dette elementet- kropp.)

Og her oppstår det en ubehagelig situasjon med eiendomsverdi-paret. I tilfellet når bakgrunnsbildet vil ha en lavere oppløsning enn dimensjonene til kroppselementet, og dette kan skje enten når siden vises på skjermer høy oppløsning, eller når du har tonnevis med innhold på siden, vil nettleseren strekke bildet.

Og som du vet, når vi strekker et bilde utover dets faktiske størrelse, mister vi bildekvaliteten ( med andre ord, pikselering vises):

Når et bilde skaleres mot sin opprinnelige størrelse, reduseres bildekvaliteten.

Ikke glem dette når du velger bakgrunn. I demoeksemplet bruker vi et bilde som måler 5500 x 3600px for store skjermer, og derfor er det usannsynlig at noe lignende vil skje i dette tilfellet.

For å sikre at bakgrunnen vår er midtstilt, erklærte vi følgende:

bakgrunnsposisjon: midt i midten;

Dette vil sette skaleringsaksene til midten av visningsporten.

Her er hva vi skal gjøre. La oss sette egenskapen for bakgrunnsvedlegg til fast for å sikre at bildet forblir på plass selv om vi ruller nedover siden:

bakgrunnsvedlegg: fast;

I demoeksemplet inkluderte jeg alternativet " laste ned noe innhold" slik at du kan observere oppførselen til bakgrunnen når du ruller siden.

Alt du trenger å gjøre er å laste ned demoen og eksperimentere litt med posisjoneringsegenskapene (bakgrunnsvedlegg og bakgrunnsposisjon) for å se hvordan de påvirker rulleoppførselen til siden og bakgrunnen.

Følgende egenskapsverdier er selvforklarende.

CSS-stenografi

Ovenfor, for klarhetens skyld, definerte jeg CSS-egenskaper i sin helhet.

Og slik ser kortversjonen ut:

body (bakgrunn: url(background-photo.jpg) midtre midtdeksel ingen repetisjon fikset; )

Alt du trenger å gjøre er å endre url-verdien til banen til bildet ditt.

Valgfritt: mediesøk for å få en mindre versjon av bakgrunnsbildet

For skjermer med lavere oppløsning trenger vi Photoshop for å redusere bildeoppløsningen proporsjonalt til 768 x 505 piksler. Jeg kjørte det også gjennom Smush.it for å redusere filstørrelsen. Dette gjorde at størrelsen kunne reduseres fra 1741 til 114 kilobyte. Dette reduserte filstørrelsen med 93 %.

Misforstå meg rett, men 114 kilobyte er fortsatt ganske mye å bruke for enkelte typer webdesign. Og vi laster bare inn de 114 kilobytene hvis det er nødvendig, fordi ser på statistikken, er det avveininger som må gjøres mellom skrivebords- og mobildesign.

Og her er selve medieforespørselen:

Nøkkeldelen av mediespørringen er egenskapen max-width: 767px, som i vårt tilfelle betyr at hvis nettleserens visningsport er større enn 767px, brukes et stort bilde.

Ulempen med denne metoden er at hvis du endrer størrelsen på nettleservinduet fra for eksempel 1200px til 640px (eller omvendt), vil du se en flimrende skjerm mens det mindre eller større bildet lastes inn.

Og i tillegg på grunn av at noen mobile enheter kan fungere med høyere oppløsning - for eksempel en iPhone 5 med Retina-skjerm med en oppløsning på 1136 x 640px, vil et mindre bilde se stygt ut.

Nesten alle populære nettsteder har en fin utseende. En viktig del av webdesign er bakgrunnen, også kalt bakgrunn, som hver enkelt av oss kan lage eller endre. I denne artikkelen vil jeg fortelle deg hvordan du legger en bakgrunn på en nettside.

Lage en ny bakgrunn for nettsider

For å fullføre oppgaven kan du bruke en av 4 metoder:

• 1. Bakgrunn med én farge
• 2. Bakgrunn med tekstur
• 3. Bakgrunn ved hjelp av en gradient
• 4. Bakgrunn fra et stort bilde

Lag en bakgrunn med én farge

For å lage eller endre bakgrunnen til nettstedet, som består av én farge, må du gå til filen style.css, der finner verdien - kroppen (den er ansvarlig for hoveddelen av nettstedet). Nå må du registrere bakgrunnsfargefunksjonen hvis den ikke fantes og angi fargekoden. I tilfelle du trenger å lage en hvit bakgrunn for et nettsted, må du skrive følgende kode:

bakgrunnsfarge: #83C5E9 ; (blå bakgrunn, som i eksempelet)

Du finner en komplett liste over farger på nettsiden - (STM). For å endre fargen, endre bare verdien etter kolon og nyt innsatsen din.

Lage en bakgrunn ved hjelp av tekstur

Denne metoden er spesielt populær i I det siste, da det lar deg lage en vakker bakgrunn for nettstedet. Teksturer kan være enkle, men veldig vakre, og det er derfor de ofte brukes. For å koble til en hvilken som helst tekstur, må du laste den opp til bildemappen på hostingen der nettstedet ditt er installert. Etter dette bør du skrive følgende kode:

bakgrunnsfarge: #537759;

bakgrunnsbilde: url(images/pattern.png);

Denne koden inneholder en kjent parameter for å opprettholde fargen (den er grønn) og et element som er ansvarlig for å koble sammen den grønne teksturen.

Lage en bakgrunn ved hjelp av en gradient

Ethvert bilde som er koblet til ved hjelp av css-funksjoner kan gjentas både horisontalt og vertikalt (langs aksene X Og Y). Denne muligheten lar oss lage hvilken som helst enkel bakgrunn for nettstedet med egne hender. For å gjøre dette må du lage en gradient 1 megapiksel bred (se bildet nedenfor), lagre det som et bilde og laste det opp til hostingen din. Etter dette kan du skrive den nødvendige koden, nemlig:

bakgrunnsfarge: #83C5E9;

bakgrunnsbilde: url(bilder/gradient.jpg);

bakgrunn-gjenta: gjenta-x;

I dette settet, i prioritert rekkefølge, er det en funksjon som er ansvarlig for bakgrunnsfargen, som vi bruker til gjenforsikring. Etter dette, en parameter som er ansvarlig for å koble sammen gradienten og til slutt en funksjon som er ansvarlig for å gjenta gradienten langs X-aksen.

Bruke et stort bilde for nettsidebakgrunnen

Denne metoden er den nest mest populære, siden den lar deg bruke forskjellige bilder for å lage en bakgrunn. For å implementere denne metoden trenger du bare å laste opp et stort bilde til nettstedets bildemappe og skrive inn følgende kode:

bakgrunnsfarge: #000000;

bakgrunnsbilde: url(bilder/bildetittel.jpg);

bakgrunnsposisjon: midt øverst;

bakgrunns-gjenta: ikke-gjenta;

Hvis alt er klart med de to første parameterne, må de to siste dekkes. Den tredje funksjonen lar deg fikse bildet i midten av nettstedet, og den siste parameteren blokkerer repetisjonen gjennom hele sidestrukturen.

Endre bakgrunnen på ucoz-nettsteder

Disse metodene for å lage en bakgrunn for et nettsted kan brukes på forskjellige innholdsstyringssystemer, men ikke på nettsteder - ucoz. For å endre bakgrunnen for ucoz-nettstedet, må du gå til nettstedets kontrollpanel, gå til "Design Management", og så inn "Redigering av maler".

Nå må du åpne stilarket (CSS), finne linjen "kropp" og parameter "bakgrunn". Etter dette må du kopiere lenken, lime den inn i nettleseren din, og du vil ha tilgang til bildet som var bakgrunnen.

For å bruke en ny bakgrunn trenger du bare å laste den opp til Filbehandler. Sørg samtidig for at navnet på det nye bakgrunnsbildet er det samme som før endringen. Lagre arbeidet ditt og gå til nettstedet for å se arbeidet som er utført.

Endre bakgrunnen for nettstedet til HTML

Hvis du vil lage bakgrunnen på et html-nettsted ved hjelp av et bilde, skriv ganske enkelt inn linjen i koden:

Og hvis du vil lage bakgrunnen til nettstedet ved hjelp av farger, bør linjen se slik ut:

Dette avslutter vår historie. Nå vet du hvordan du lager en bakgrunn for et nettsted. Glade prosjekter!

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 håndlaget teppe. 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 bakgrunnsfargen til ressursen eller bakgrunnsbildet.

Det er flere måter å endre bakgrunnen på et nettsted. Til dette brukes funksjonene til CSS 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 å angi bakgrunnsfargen for et nettsted, bruk 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

I tillegg til den heksadesimale fargekoden, støttes en 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. Denne verdien er tilordnet denne egenskapen 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 bruke det enkleste sentreringsalternativet:

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 med en høyhastighets Internett-tilkobling. Men hva med mobilt internett, som vil ta lang tid å laste flere "meter"?

Alle disse problemene løses ved hjelp av en teksturert bakgrunn. Den bruker et lite bilde som et teksturmønster. Selv om det gjentas mange ganger, blir tegningen kun lastet én gang.

Trepachev D.P. 2012–2020

Til studenter: Jeg har ferie til 6. januar, i løpet av ferien skal jeg svare så mye som mulig,
noen ganger kan jeg forsvinne i et par dager

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Grunnleggende opplæring HTML-referanse CSS-referanse OOP- og MVC-veiledning Videoveiledning Grunnleggende opplæring Referanse Videoveiledning Grunnleggende opplæring Grunnleggende opplæring Grunnleggende opplæring Administratorveiledning Utviklerveiledning AJAX+PHP

bakgrunnsvedleggsegenskap

Eiendom bakgrunnsvedlegg spesifiserer hvordan du ruller bakgrunnsbilde element: sammen med teksten eller teksten vil gli over bildet.

Syntaks

Velger ( bakgrunnsvedlegg: fast | bla | lokal; )

Verdier

Standardverdi: bla.

Eksempel. Rullverdi

Nå eiendom bakgrunnsvedlegg satt til bla. Rull elementet vertikalt - du vil se teksten rulle sammen med bakgrunnen:

body ( background-attachment: scroll; background-image: url("bg.png"); ) #elem ( width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px;)

Eksempel. Rullverdi

Og nå eiendommen bakgrunnsvedlegg satt til fikset. Rull elementet vertikalt, og du vil se teksten gli over bakgrunnen:

body ( background-attachment: fixed; background-image: url("bg.png"); ) #elem ( width: 400px; margin: 0 auto; text-align: justify; font-weight: bold; font-size: 20px;)