Som oftest, tekstdokumenter er laget på en vanlig hvit bakgrunn. Men noen ganger er det behov for å legge til noe uvanlig bakgrunn til dokumentet. Dette kan være nødvendig hvis du for eksempel skal lage en plakat, hefte, brosjyre eller annonse.

Heldigvis utviklerne tekstredigerer Word forutså en lignende situasjon og bygget inn den tilsvarende funksjonen. I dette materialet vil vi snakke om hvordan du lager et hvilket som helst bilde, bilde eller fotografi som bakgrunn i Word.

For å sette et bilde som bakgrunn i Word 2007, 2010, 2013 eller 2016, må du gå til fanen "Sideoppsett", klikk på "Sidefarge"-knappen der og velge alternativet "Fyllmetoder".

Hvis du bruker Word 2003, må du åpne menyen "Format - Bakgrunn - Fyllmetoder" for å gjøre dette.

Etter dette vil "Fyllmetoder"-vinduet åpnes med sidebakgrunnsinnstillinger. I dette vinduet må du gå til "Bilde" -fanen, klikk på "Bilde" -knappen der og i vinduet som vises, velg bildet du vil lage bakgrunnen til dokumentet.

Etter at ønsket bilde vises i "Fyllmetoder"-vinduet, må du lukke det ved å bruke "Ok" -knappen.

Som et resultat vil bildet du velger bli brukt som bakgrunn for Word-dokumentet.

Andre sidebakgrunnsdesignalternativer

I tillegg til et bilde kan du bruke en gradient, tekstur eller mønster som bakgrunn for et dokument. For å bruke bakgrunnen som en gradient, må du åpne vinduet "Fyllmetode" som beskrevet ovenfor, gå til fanen "Gradient" og velg de riktige gradientinnstillingene der. For en gradient kan du bruke en eller to farger, eller du kan bruke en av de ferdige gradientene.

For å bruke en tekstur som bakgrunn, må du gå til "Tekstur" -fanen og velge en av de foreslåtte teksturene. Du kan også laste opp din egen tekstur. For å gjøre dette, bruk knappen "Annen tekstur".

For å lage en bakgrunn ved hjelp av et mønster, må du gå til "Mønster" -fanen, velge ett av de foreslåtte mønstrene, og også angi fargen på mønsteret og fargen på hovedbakgrunnen på siden.

Du kan også bruke en ensartet fyll i én farge som sidebakgrunn. For å gjøre dette, trenger du bare å klikke på "Sidefarge" -knappen på "Sideoppsett"-fanen og velge en av de foreslåtte fargene.

Og for å fjerne enhver sidebakgrunn, må du klikke på "Sidefarge"-knappen og velge "Ingen farge".

Når du setter opp et nettsted, i tillegg til funksjonalitet, er design veldig viktig. Dette er det som setter stilen og designet til et bestemt selskap eller person som nettsiden lages for. Det er enkelt å tilpasse bakgrunnsfargen og bildet ved å følge instruksjonene i denne artikkelen.

Åpne HTML-filen ved å bruke Notepad eller et annet tekstredigeringsprogram du er vant til. La oss for eksempel ta en primitiv nettside med et minimum av tekst. Du kan åpne filen ved å bruke hvilken som helst nettleser.

Først må du endre fargen på bakgrunnen din, siden personer med en treg Internett-tilkobling ikke umiddelbart vil kunne se bakgrunnsbildet til nettstedet. En stund, mens bildet lastes inn, vil de bare kunne se fargen på nettstedet ditt.
Skriv inn i taggen parameter bgcolor="*****", der ***** er fargekoden. Du kan finne ut fargene for HTML i hvilken som helst grafisk redaktør ved å velge alternativet "for web" eller på nettstedet https://colorscheme.ru/color-names

Du trenger bare å velge en farge i sirkelpaletten og tilordne dens intensitet innenfor firkanten. Til høyre ser du to koder for html. Kopier dem og lim dem inn i notisblokk.

Etter å ha valgt en farge og satt den inn i koden, se om du gjorde alt riktig ved å se den resulterende nettsiden fra en nettleser.

Nå kan du begynne å sette inn bakgrunnsbildet ditt. Plasser ønsket bilde i kodemappen for større bekvemmelighet. Gi ham et navn med latinske bokstaver.

Finn nå ut plasseringen av filen ved å høyreklikke på den, velge "Åpne med" og klikke på hvilken som helst nettleser som er installert på datamaskinen din.

Kopier adressen fra søkestreng nettleseren din.

Nå i taggen skriv inn linjen:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

Lagre filen din.

Sjekk nettsiden din. Du vil se at bakgrunnen har blitt erstattet med teksten din.

Vær oppmerksom på at for brukere med høyere skjermoppløsning, vil bildet ditt dupliseres nedover og til høyre. Det vil ikke se bra ut hvis bildet ikke er monokromatisk. Det er spesielle kommandoer for å korrigere denne parameteren.

• background-repeat : "Verdi." Alternativer for verdien kan være: «repeat-x» – gjentar bakgrunnsbildet ditt både horisontalt og vertikalt. "repeat-y" - repetisjon kun vertikalt. «no-repeat» – bildet er frosset på plass og gjentas ikke. "mellomrom" – hele siden vil bli fylt med maksimalt antall kopier av bildet, de ytterste vil bli beskåret. "rund" - det samme alternativet, men kantene på bildet vil bli nøye skalert;
• bakgrunnsvedlegg: «Verdi». Hvis du erstatter "scroll"-taggen i stedet for ordet Value, vil bildet rulle sammen med nettstedet. "fast" - bakgrunnen forblir uendret når du ruller;
• bakgrunnsstørrelse: Verdi Verdi2. Her må verdiene ha en verdi i piksler. For eksempel: 100px 200px. I tillegg til piksler aksepteres prosentverdier. Dette er et alternativ for å fylle siden med et bilde. I tillegg til tall kan du angi to parametere: «contain» – fyller siden med et bilde langs langsiden og «cover» – fyller siden med et bilde langs bredden.

Når du vet det grunnleggende om å fylle en side med bakgrunn i HTML, er du klar til å lage ditt første nettsted.

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 hvordan du setter et bakgrunnsbilde på et nettsted 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 kan bakgrunnsfargen og bakgrunnsbildet 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.

Moderne nettlesere lar deg legge til et vilkårlig antall bakgrunnsbilder til et element, og viser parameterne for hver bakgrunn atskilt med kommaer. 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 kroppsvelgeren.

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. GIF-grafikkformatet støtter også enkel animasjon ved å sekvensielt endre rammer. Så ved å bruke et bilde i dette formatet er det mulig å animere ikke bare individuelle bilder, men også bakgrunnen til en nettside eller et spesifikt element.

Først må du lage et animert bilde i GIF-format hva du kan bruke programmet til Adobe 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.

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.