Obično, tekstualni dokumenti nastaju na običnoj bijeloj pozadini. No, ponekad postoji potreba dodati neku neobičnu pozadinu dokumentu. Ovo može biti potrebno ako, na primjer, izrađujete plakat, knjižicu, brošuru ili oglas.

Srećom, programeri uređivač teksta Word je predvidio sličnu situaciju i ugradio odgovarajuću funkciju. U ovom materijalu ćemo govoriti o tome kako napraviti bilo koju sliku, sliku ili fotografiju kao pozadinu u Wordu.

Kako biste postavili sliku kao pozadinu u Wordu 2007, 2010, 2013 ili 2016, morate otići na karticu "Page Layout", tamo kliknuti na gumb "Page Color" i odabrati opciju "Fill Methods".

Ako koristite Word 2003, da biste to učinili, morate otvoriti izbornik "Format - Pozadina - Metode popunjavanja".

Nakon toga otvorit će se prozor "Metode popunjavanja" s postavkama pozadine stranice. U ovom prozoru morate otići na karticu "Slika", tamo kliknuti na gumb "Slika" iu prozoru koji se pojavi odabrati sliku koju želite učiniti pozadinom dokumenta.

Nakon što se željena slika pojavi u prozoru "Načini popunjavanja", morate ga zatvoriti pomoću gumba "U redu".

Kao rezultat toga, slika koju odaberete koristit će se kao pozadina vašeg Word dokumenta.

Ostale mogućnosti dizajna pozadine stranice

Osim slike, kao pozadinu dokumenta možete koristiti gradijent, teksturu ili uzorak. Kako biste koristili pozadinu kao gradijent, trebate otvoriti prozor "Metoda ispune" kao što je gore opisano, otići na karticu "Gradijent" i tamo odabrati odgovarajuće postavke gradijenta. Za gradijent možete koristiti jednu ili dvije boje ili možete koristiti jedan od gotovih gradijenata.

Da biste koristili teksturu kao pozadinu, morate otići na karticu "Tekstura" i odabrati jednu od predloženih tekstura. Također možete učitati vlastitu teksturu. Da biste to učinili, upotrijebite gumb "Druga tekstura".

Da biste stvorili pozadinu pomoću uzorka, morate otići na karticu "Uzorak", odabrati jedan od predloženih uzoraka, a također postaviti boju uzorka i boju glavne pozadine stranice.

Također možete koristiti jednoliku ispunu jedne boje kao pozadinu stranice. Da biste to učinili, samo trebate kliknuti na gumb "Boja stranice" na kartici "Izgled stranice" i odabrati jednu od predloženih boja.

A kako biste uklonili bilo koju pozadinu stranice, morate kliknuti gumb "Boja stranice" i odabrati "Bez boje".

Prilikom postavljanja bilo koje web stranice, osim funkcionalnosti, dizajn je jako bitan. To je ono što određuje vlastiti stil i dizajn određene tvrtke ili osobe za koju se web stranica izrađuje. Prilagođavanje boje pozadine i slike jednostavno je slijedeći upute u ovom članku.

Otvorite svoju HTML datoteku koristeći Notepad ili bilo koji drugi uređivač teksta na koji ste navikli. Na primjer, uzmimo primitivnu web stranicu s minimalno teksta. Svoju datoteku možete otvoriti pomoću bilo kojeg preglednika.

Najprije promijenite boju pozadine jer osobe sa sporom internetskom vezom neće moći odmah vidjeti pozadinsku sliku stranice. Neko vrijeme, dok se slika učitava, moći će vidjeti samo boju vaše stranice.
Unesite oznaku parametar bgcolor=”*****”, gdje je ***** kod boje. Boje za HTML možete pronaći u bilo kojem grafički urednik odabirom opcije “za web” ili na web stranici https://colorscheme.ru/color-names

Samo trebate odabrati boju u paleti krugova i dodijeliti joj intenzitet unutar kvadrata. Desno ćete vidjeti dva koda za html. Kopirajte ih i zalijepite u bilježnicu.

Nakon što ste odabrali boju i umetnuli je u kod, provjerite jeste li sve učinili ispravno gledajući rezultirajuću web stranicu iz preglednika.

Sada možete početi umetati pozadinsku sliku. Postavite željenu sliku u mapu s kodovima radi veće udobnosti. Dajte mu ime latiničnim slovima.

Sada saznajte lokaciju datoteke tako da je kliknete desnom tipkom miša, odaberete "Otvori s" i kliknete na bilo koji preglednik instaliran na vašem računalu.

Kopirajte adresu iz niz za pretraživanje vaš preglednik.

Sada u oznaci unesite redak:

• style=”background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Spremite svoju datoteku.

Provjerite svoju web stranicu. Vidjet ćete da je pozadina zamijenjena vašim tekstom.

Imajte na umu da će se za korisnike s višom razlučivošću zaslona vaša slika duplicirati prema dolje i udesno. Neće izgledati dobro ako slika nije monokromatska. Postoje posebne naredbe za ispravljanje ovog parametra.

• background-repeat : "Vrijednost." Opcije za vašu vrijednost mogu biti: "repeat-x" – ponavlja vašu pozadinsku sliku vodoravno i okomito. “repeat-y” – ponavljanje samo okomito. “no-repeat” – slika je zamrznuta na mjestu i ne ponavlja se. “razmak” – cijela stranica će biti ispunjena maksimalnim brojem kopija slike, one najudaljenije će biti izrezane. "okrugli" - ista opcija, ali rubovi slike bit će pažljivo skalirani;
• background-attachment: “Vrijednost.” Ako zamijenite oznaku "scroll" umjesto riječi Value, slika će se pomicati zajedno sa web mjestom. “fiksno” – pozadina ostaje nepromijenjena prilikom pomicanja;
• veličina pozadine: Vrijednost Vrijednost2. Ovdje vrijednosti moraju imati vrijednost u pikselima. Na primjer: 100px 200px. Osim piksela, prihvaćaju se postotne vrijednosti. Ovo je opcija za popunjavanje stranice slikom. Osim brojeva, možete unijeti dva parametra: “contain” – popunjava stranicu slikom po dužoj strani i “cover” – popunjava stranicu slikom po širini.

Nakon što upoznate osnove ispunjavanja stranice pozadinom u HTML-u, spremni ste za izradu svoje prve web stranice.

U prošlom smo članku govorili o tome kako promijeniti boju pozadine na web stranici pomoću atributa oznaka tijelo i CSS stilovi: . Ovaj članak će govoriti o korištenju slika kao pozadine na web stranici, kako rastegnuti pozadinu na punu širinu stranice i popraviti je.

Slika kao pozadina stranice - HTML

Prvo razmotrimo kako postaviti pozadinsku sliku na web mjesto pomoću atributa pozadina označiti tijelo:

Ovdje je pozadinska slika postavljena pomoću atributa pozadine oznake tijela.

Kao u gornjem primjeru, preporuča se da osim slike odredite i boju pozadine (ona će biti prikazana na stranici dok se stranica učitava), koja će najbolje odgovarati pozadinskoj slici i stvarati kontrast s tekstom na stranici. Na primjer, ako koristite bijelu boju teksta na svojoj web stranici, trebali biste odrediti tamnu boju pozadine i postaviti tamnu pozadinsku sliku. U tom će slučaju tekst biti lako čitljiv.

Bilješka: Preporuča se postaviti pozadinsku sliku i boju pozadine ne pomoću HTML-a, već pomoću koristeći CSS. U tom slučaju kod će biti valjan i točniji.

Slika kao pozadina stranice - CSS

U CSS-u, boja pozadine i pozadinska slika mogu se postaviti u jednom svojstvu pozadina:

Ovdje je pozadinska slika postavljena korištenjem pozadinskog CSS svojstva.

Ovdje koristim imovinu pozadina-prilog pozadina stranice je fiksna i koristi se svojstvo pozadinsko ponavljanje postavlja se horizontalno ponavljanje slike. Ali vrijedi uzeti u obzir da bi pozadinska slika trebala biti dobro "zašivena" oko rubova.

Ako želite rastegnuti pozadinsku sliku na punu veličinu prozora preglednika, upotrijebite svojstvo veličina pozadine: 100%;

U alatu za izradu web stranica Nubex možete koristiti veliku sliku kao pozadinu za bilo koju web stranicu i prikvačiti je.

Moderni preglednici omogućuju dodavanje proizvoljnog broja pozadinskih slika elementu, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i za nju prvo odrediti jednu pozadinu, a drugu odvojenu zarezom.

Kako rastegnuti pozadinu na punu širinu prozora?

Za skaliranje pozadine upotrijebite svojstvo veličine pozadine; postavite njegovu vrijednost na 100%, tada će pozadina zauzeti cijelu širinu prozora preglednika. Za starije verzije preglednika trebali biste koristiti određena svojstva s prefiksima, kao što je prikazano u primjeru 1.

Kako dodati pozadinsku sliku na web stranicu?

Da biste dodali pozadinsku sliku na web stranicu, postavite put do slike unutar url vrijednosti svojstva stila pozadine, koje se zauzvrat dodaje izborniku tijela.

Je li moguće napraviti animiranu pozadinu?

Animacija je prilično moćna tehnika koja može oživjeti svaki dokument, stoga ne čudi što je Flash tehnologija, koja na web stranice dodaje crtiće, i to interaktivne, postala iznimno popularna. GIF grafički format također podržava jednostavnu animaciju uzastopnom izmjenom okvira. Dakle, koristeći sliku u ovom formatu, moguće je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određeni element.

Prvo morate stvoriti animiranu sliku GIF format za što možete koristiti program Adobe Photoshop ili druge prikladne za ovu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina pomoću svojstva stila pozadine, kao što je prikazano u primjeru 1.

Kako staviti pozadinsku sliku u donji desni kut stranice?

Za kontrolu položaja pozadinske slike na stranici koristi se svojstvo stila položaja pozadine; njime se istovremeno postavljaju vodoravne i okomite koordinate slike. Za otkazivanje ponavljanja pozadinske slike upotrijebite svojstvo background-position s vrijednošću no-repeat.

Kako mogu spriječiti ponavljanje pozadine?

Prema zadanim postavkama, pozadinska slika se ponavlja vodoravno i okomito, tvoreći mozaik preko cijelog polja web stranice. Međutim, ovo ponašanje pozadine nije uvijek potrebno, osobito kada se postavlja jedna slika, pa će dodavanje vrijednosti bez ponavljanja svojstvu stila pozadine pomoći.

Kako mogu učiniti da se pozadina ponavlja samo okomito?

Ponavljanje pozadine obično je potrebno za stvaranje ukrasnih linija ili gradijenata koji su povezani s visinom elementa web stranice ili prozora. U takvim slučajevima okomito ponavljanje pozadine daje dosljednu sliku, bez obzira na veličinu elemenata. Samo na početku trebali biste se uvjeriti da se pozadinska slika ponavlja bez šavova.

Svaka će soba izgledati mnogo bolje ako je pod presvučen skupim perzijskim tepihom. Pa zašto je vaša web stranica lošija? Možda je vrijeme da njegov pod "pokrijete" skupim, elegantnim ručno rađenim tepihom. Pogledajmo pobliže kako napraviti pozadinu za web stranicu:

Pozadina za stranicu

Događa se da stari dizajn Već sam umoran od stranice. I želim nešto novo i ukusno. A novi dizajn bit će tako ako ga skuhate svojim rukama.

No potpuno samostalno promijeniti cijeli dizajn resursa nezahvalan je zadatak. I nisu svačije ruke pravilno uvježbane za ovaj zadatak. Stoga je najlakši način za osvježavanje starog predloška promjena boje pozadine resursa ili njegove pozadinske slike.

Postoji nekoliko načina za promjenu pozadine na web stranici. Za to se koriste mogućnosti CSS-a ili html-a. Ali mnoga svojstva za rad s pozadinom imaju isti naziv i način primjene u tim web tehnologijama.

Osnove rada s pozadinama u html-u

Nekoliko elemenata može se koristiti kao pozadina:

• Boja;
• Pozadinska slika;
• Slika teksture.

Pogledajmo detaljnije upotrebu svakog od njih.

Da biste postavili boju pozadine za web mjesto, upotrijebite svojstvo boje pozadine atributa stila. To jest, da biste postavili glavnu boju za web stranicu, morate je napisati unutar oznake . Na primjer:

Pozadina web stranice #55D52B

Uz heksadecimalni kod boje, podržana je vrijednost u ključnoj riječi ili RGB formatu. Primjeri:

Pozadina web stranice rgb(23,113,44)

Zelena pozadina web stranice

Postavite boju pozadine pomoću ključne riječi ima niz ograničenja u usporedbi s druge dvije metode.

HTML podržava samo 16 ključnih riječi za postavljanje boja. Evo nekoliko njih: bijela, crvena, plava, crna, žuta i drugi.

Stoga, da biste postavili pozadinu za html stranicu, bolje je koristiti heksadecimalni ili RGB format.

Osim odabira boja, dostupne su i druge mogućnosti prilagodbe. Ako je svojstvo background-color postavljeno na transparentno, pozadina stranice će postati prozirna. Ova je vrijednost dodijeljena ovom svojstvu prema zadanim postavkama.

Sada pogledajmo mogućnosti jezika hiperteksta za postavljanje pozadinske slike za web mjesto. To se može učiniti korištenjem svojstva background-image.

Kao što možete vidjeti iz koda, slika je povezana preko url putanje navedenog u zagradama. Ali nisu sve slike toliko velike da svojom veličinom ispunjavaju cijelo područje zaslona. Da vidimo kako će manja slika biti prikazana.

Pretpostavimo da razvijamo web stranicu o poeziji i trebamo koristiti sliku Pegaza kao pozadinu. Krilati konj će personificirati slobodu pjesnikove kreativne misli!

Trebamo da se slika jednom prikaže na sredini ekrana. Ali, nažalost, preglednik ne razumije naše uzvišene želje. I prikazuje manju sliku za pozadinu stranice onoliko puta koliko površina zaslona može primiti:

Možda će četiri nasmijana konja s krilima biti prevelika inspiracija pjesnicima. Stoga zabranjujemo kloniranje našeg Pegaza. To radimo pomoću svojstva pozadinskog ponavljanja. Moguće vrijednosti:

• repeat-x – vodoravno ponavljanje pozadinske slike;
• repeat-y – okomito;
• ponoviti - na obje osi;
• no-repeat – ponavljanje je zabranjeno.

Od navedenih opcija, zanima nas posljednja. Prije promjene pozadine stranice koristimo je u našem kodu:

Ali, naravno, bilo bi bolje da se naš letak nalazi na sredini ekrana. Svojstvo background-position je upravo namijenjeno pozicioniranju pozadinske slike na stranici. Koordinate lokacije možete postaviti na nekoliko načina:

• Ključna riječ ( gore, dolje, sredina, lijevo, desno);
• Postotak – brojanje počinje od gornjeg lijevog kuta;
• U mjernim jedinicama (pikseli).

Upotrijebimo najjednostavniju opciju centriranja:

Dešava se da trebate popraviti položaj slike prilikom pomicanja. Stoga, prije nego što napravite sliku kao pozadinu stranice, upotrijebite posebno svojstvo background-attachment. Vrijednosti koje prihvaća su:

• svitak;


• fiksni.

Trebamo posljednju vrijednost. Sada će naš primjer koda izgledati ovako:

Pozadina teksture web stranice

U prvom smo primjeru za pozadinu koristili veliki i lijepi pustinjski krajolik. Ali za takvu ljepotu morate u potpunosti platiti. Težina slike izrađene u visoka kvaliteta, može doseći nekoliko megabajta.

Ovaj volumen ni na koji način ne utječe na brzinu učitavanja stranica preglednika s brzom internetskom vezom. Ali što s tim? mobilni internet, što će dugo trajati za učitavanje nekoliko "metara"?

Svi ovi problemi rješavaju se uz pomoć teksturirane pozadine. Koristi malu sliku kao uzorak teksture. Čak i ako se ponavlja mnogo puta, crtež se učitava samo jednom.