zvyčajne textové dokumenty sú vytvorené na obyčajnom bielom pozadí. Niekedy je však potrebné pridať do dokumentu nejaké nezvyčajné pozadie. Môže to byť potrebné, ak napríklad vytvárate plagát, brožúru, brožúru alebo reklamu.

Našťastie vývojári textový editor Word predvídal podobnú situáciu a zabudoval do nej zodpovedajúcu funkciu. V tomto materiáli budeme hovoriť o tom, ako vytvoriť akýkoľvek obrázok, obrázok alebo fotografiu ako pozadie v programe Word.

Ak chcete nastaviť obrázok ako pozadie v programe Word 2007, 2010, 2013 alebo 2016, musíte prejsť na kartu „Rozloženie stránky“, kliknúť na tlačidlo „Farba stránky“ a vybrať možnosť „Metódy výplne“.

Ak používate Word 2003, musíte na to otvoriť ponuku „Formát - Pozadie - Metódy výplne“.

Potom sa otvorí okno „Metódy vypĺňania“ s nastaveniami pozadia stránky. V tomto okne musíte prejsť na kartu „Obrázok“, kliknúť na tlačidlo „Obrázok“ a v zobrazenom okne vybrať obrázok, ktorý chcete vytvoriť ako pozadie dokumentu.

Keď sa v okne „Vyplniť metódy“ zobrazí požadovaný obrázok, musíte ho zatvoriť pomocou tlačidla „OK“.

V dôsledku toho sa obrázok, ktorý vyberiete, použije ako pozadie dokumentu programu Word.

Ďalšie možnosti dizajnu pozadia stránky

Okrem obrázka môžete ako pozadie dokumentu použiť prechod, textúru alebo vzor. Ak chcete použiť pozadie ako prechod, musíte otvoriť okno „Metóda výplne“ ako je popísané vyššie, prejsť na kartu „Gradient“ a tam vybrať príslušné nastavenia prechodu. Pre prechod môžete použiť jednu alebo dve farby alebo môžete použiť jeden z pripravených prechodov.

Ak chcete použiť textúru ako pozadie, musíte prejsť na kartu „Textúra“ a vybrať jednu z navrhovaných textúr. Môžete tiež nahrať svoju vlastnú textúru. Ak to chcete urobiť, použite tlačidlo „Iná textúra“.

Ak chcete vytvoriť pozadie pomocou vzoru, musíte prejsť na kartu „Vzor“, vybrať jeden z navrhovaných vzorov a tiež nastaviť farbu vzoru a farbu hlavného pozadia stránky.

Ako pozadie stránky môžete použiť aj jednotnú výplň jednej farby. Ak to chcete urobiť, stačí kliknúť na tlačidlo „Farba stránky“ na karte „Rozloženie stránky“ a vybrať jednu z navrhovaných farieb.

A ak chcete odstrániť pozadie stránky, musíte kliknúť na tlačidlo „Farba stránky“ a vybrať „Bez farby“.

Pri nastavovaní akejkoľvek webovej stránky je okrem funkčnosti veľmi dôležitý aj dizajn. Práve ten určuje vlastný štýl a dizajn konkrétnej spoločnosti alebo osoby, pre ktorú web tvorí. Prispôsobenie farby pozadia a obrázka je jednoduché podľa pokynov v tomto článku.

Otvorte súbor HTML pomocou programu Poznámkový blok alebo iného textového editora, na ktorý ste zvyknutí.

Vezmime si napríklad primitívnu webovú stránku s minimom textu. Súbor môžete otvoriť pomocou ľubovoľného prehliadača.
Najprv zmeňte farbu pozadia, pretože ľudia s pomalým internetovým pripojením nebudú môcť okamžite vidieť obrázok na pozadí stránky. Chvíľu, kým sa obrázok načíta, budú môcť vidieť iba farbu vášho webu. Zadajte značku parameter bgcolor=”*****”, kde ***** je kód farby. Farby pre HTML nájdete v ľubovoľnom grafický editor

výberom možnosti „pre web“ alebo na webovej stránke https://colorscheme.ru/color-names

Stačí si vybrať farbu v kruhovej palete a priradiť jej intenzitu v rámci štvorca. Na pravej strane uvidíte dva kódy pre html. Skopírujte ich a vložte do poznámkového bloku.

Po výbere farby a jej vložení do kódu skontrolujte, či ste urobili všetko správne zobrazením výslednej webovej stránky z prehliadača.

Teraz môžete začať vkladať obrázok na pozadie. Pre väčšie pohodlie umiestnite požadovaný obrázok do priečinka s kódom. Daj mu meno latinkou.

Teraz zistite umiestnenie súboru tak, že naň kliknete pravým tlačidlom myši, vyberiete možnosť „Otvoriť pomocou“ a kliknete na ľubovoľný prehliadač nainštalovaný v počítači. Skopírujte adresu z vyhľadávací reťazec

váš prehliadač. Teraz v značke

• zadajte riadok:

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

Uložte súbor.

Skontrolujte svoju webovú stránku. Uvidíte, že pozadie je nahradené vaším textom.

• background-repeat : "Hodnota." Možnosti pre vašu hodnotu môžu byť: „repeat-x“ – zopakuje obrázok na pozadí horizontálne aj vertikálne. „repeat-y“ – opakovanie len vertikálne. „no-repeat“ – obraz zamrzne na mieste a neopakuje sa. „medzera“ – celá strana bude vyplnená maximálnym počtom kópií obrázka, krajné budú orezané. „okrúhle“ – rovnaká možnosť, ale okraje obrázka budú starostlivo zmenšené;
• background-attachment: „Hodnota“. Ak namiesto slova Hodnota nahradíte značku „scroll“, obrázok sa bude posúvať spolu s webom. „pevné“ – pozadie zostáva pri rolovaní nezmenené;
• background-size: Hodnota Hodnota2. Tu musia mať hodnoty hodnotu v pixeloch. Napríklad: 100px 200px. Okrem pixelov sú akceptované aj percentuálne hodnoty. Toto je možnosť vyplniť stránku obrázkom. Okrem čísel môžete zadať dva parametre: „obsahovať“ – vyplní stranu obrázkom pozdĺž dlhšej strany a „obálka“ – vyplní stranu obrázkom po šírke.

Keď poznáte základy vypĺňania stránky pozadím v HTML, ste pripravení vytvoriť svoj prvý web.

V minulom článku sme hovorili o tom, ako zmeniť farbu pozadia na webe pomocou atribútov značiek telo a CSS štýly: . Tento článok bude hovoriť o použití obrázkov ako pozadia na webovej stránke, ako roztiahnuť pozadie na celú šírku stránky a opraviť ho.

Obrázok ako pozadie stránky - HTML

Najprv zvážime, ako nastaviť obrázok na pozadí na webe pomocou atribútu pozadie tag telo:

Tu sa obrázok na pozadí nastavuje pomocou atribútu pozadia značky body.

Ako v príklade vyššie, odporúča sa zadať okrem obrázka aj farbu pozadia (zobrazí sa na stránke počas načítavania stránky), ktorá bude najlepšie zodpovedať obrázku na pozadí a vytvorí kontrast s textom na strane. Ak napríklad na svojej webovej lokalite používate bielu farbu textu, mali by ste zadať tmavú farbu pozadia a nastaviť tmavý obrázok na pozadí. V tomto prípade bude text ľahko čitateľný.

Poznámka: Odporúča sa nastaviť obrázok pozadia a farbu pozadia nie pomocou HTML, ale pomocou pomocou CSS. V tomto prípade bude kód platný a správnejší.

Obrázok ako pozadie stránky - CSS

V CSS je možné nastaviť farbu pozadia a obrázok pozadia v jednej vlastnosti pozadie:

Tu je obrázok pozadia nastavený pomocou vlastnosti CSS pozadia.

Tu pomocou nehnuteľnosti pozadie-príloha pozadie stránky je pevné a používa sa vlastnosť pozadie-opakovať je nastavené horizontálne opakovanie obrazu. Ale stojí za to zvážiť, že obrázok na pozadí by mal byť dobre „prešitý“ okolo okrajov.

Ak chcete obrázok na pozadí roztiahnuť na plnú veľkosť okna prehliadača, použite vlastnosť veľkosť pozadia: 100 %;

V nástroji na tvorbu webových stránok Nubex môžete použiť veľký obrázok ako pozadie pre ľubovoľnú webovú stránku a pripnúť ho.

Moderné prehliadače vám umožňujú pridať k prvku ľubovoľný počet obrázkov na pozadí, pričom sú uvedené parametre každého pozadia oddelené čiarkami. Stačí použiť vlastnosť universal background a zadať pre ňu najprv jedno pozadie a druhé oddeliť čiarkou.

Ako roztiahnuť pozadie na celú šírku okna?

Ak chcete zmeniť veľkosť pozadia, použite vlastnosť background-size, nastavte jej hodnotu na 100%, potom bude pozadie zaberať celú šírku okna prehliadača. Pre staršie verzie prehliadačov by ste mali používať špecifické vlastnosti s predponami, ako je uvedené v príklade 1.

Ako pridať obrázok na pozadí na webovú stránku?

Ak chcete pridať obrázok pozadia na webovú stránku, nastavte cestu k obrázku v rámci hodnoty url vlastnosti štýlu pozadia, ktorá sa následne pridá do selektora tela.

Je možné urobiť animované pozadie?

Animácia je pomerne výkonná technika, ktorá dokáže oživiť akýkoľvek dokument, takže nie je prekvapujúce, že technológia Flash, ktorá pridáva na webové stránky karikatúry, a k tomu interaktívne, sa stala mimoriadne populárnou. Grafický formát GIF podporuje aj jednoduchú animáciu postupnou zmenou snímok. Takže pomocou obrázka v tomto formáte je možné animovať nielen jednotlivé obrázky, ale aj pozadie webovej stránky alebo konkrétneho prvku.

Najprv musíte vytvoriť animovaný obrázok vo formáte GIF na čo môžete program použiť Adobe Photoshop alebo iné vhodné na tento účel. Existujú aj knižnice hotových animovaných súborov, ktoré možno použiť ako obrázok na pozadí. Potom sa obrázok pridá ako pozadie pomocou vlastnosti štýlu pozadia, ako je uvedené v príklade 1.

Ako umiestniť obrázok na pozadí do pravého dolného rohu stránky?

Na ovládanie pozície obrázka pozadia na stránke sa používa vlastnosť background-position style, ktorá súčasne nastavuje horizontálne a vertikálne súradnice obrázku. Ak chcete zrušiť opakovanie obrázka na pozadí, použite vlastnosť background-position s hodnotou no-repeat .

Ako môžem zabrániť opakovaniu pozadia?

V predvolenom nastavení sa obrázok na pozadí opakuje horizontálne a vertikálne a tvorí mozaiku cez celé pole webovej stránky. Toto správanie na pozadí sa však nie vždy vyžaduje, najmä pri umiestňovaní jedného obrázka, takže pridanie hodnoty bez opakovania do vlastnosti štýlu pozadia pomôže.

Ako môžem nastaviť, aby sa pozadie opakovalo iba vertikálne?

Opakovanie pozadia sa zvyčajne vyžaduje na vytvorenie dekoratívnych čiar alebo prechodov, ktoré sú viazané na výšku prvku webovej stránky alebo okna. V takýchto prípadoch opakované zvislé pozadie poskytuje konzistentný obraz bez ohľadu na veľkosť prvkov. Najprv by ste sa mali uistiť, že sa obrázok na pozadí opakuje bez švov.

Každá miestnosť bude vyzerať oveľa lepšie, ak bude jej podlaha pokrytá drahým perzským kobercom. Prečo je teda váš web horší? Možno je čas „pokryť“ podlahu drahým, elegantným ručne vyrobeným kobercom. Pozrime sa bližšie na to, ako vytvoriť pozadie pre webovú stránku:

Pozadie pre stránku

Stáva sa to starý dizajn Už som unavený zo stránky. A chcem niečo nové a chutné. A nový dizajn bude to tak, ak si to uvaríte vlastnými rukami.

Ale úplne zmeniť celý dizajn zdroja svojpomocne je nevďačná úloha. A nie každý má na túto úlohu správne vycvičené ruky. Najjednoduchším spôsobom obnovenia starej šablóny je preto zmena farby pozadia zdroja alebo jeho obrázka na pozadí.

Existuje niekoľko spôsobov, ako zmeniť pozadie na webovej stránke. Na to sa využívajú možnosti CSS alebo html. Ale mnohé vlastnosti pre prácu s pozadím majú rovnaký názov a spôsob aplikácie v týchto webových technológiách.

Základy práce s pozadiami v html

Ako pozadie možno použiť niekoľko prvkov:

• Farba;
• Obrázok na pozadí;
• Obrázok textúry.

Pozrime sa na využitie každého z nich podrobnejšie.

Ak chcete nastaviť farbu pozadia lokality, použite vlastnosť background-color atribútu style. To znamená, že ak chcete nastaviť hlavnú farbu webovej stránky, musíte ju napísať do značky . Napríklad:

Pozadie webovej stránky #55D52B

Okrem hexadecimálneho farebného kódu je podporovaná hodnota vo formáte kľúčového slova alebo RGB. Príklady:

Pozadie webovej stránky rgb (23,113,44)

Pozadie webovej stránky zelené

Nastavte farbu pozadia pomocou Kľúčové slová má v porovnaní s ostatnými dvoma metódami množstvo obmedzení.

HTML podporuje iba 16 kľúčových slov na nastavenie farieb. Tu je niekoľko z nich: biela, červená, modrá, čierna, žltá a ďalšie.

Preto, aby ste nastavili pozadie pre html webovú stránku, je lepšie použiť hexadecimálny alebo RGB formát.

Okrem výberu farieb sú k dispozícii aj ďalšie možnosti prispôsobenia. Ak je vlastnosť background-color nastavená na priehľadné , pozadie stránky sa stane priehľadným. Táto hodnota je predvolene priradená tejto vlastnosti.

Teraz sa pozrime na možnosti hypertextového jazyka na nastavenie obrázka na pozadí pre web. Dá sa to urobiť pomocou vlastnosti background-image.

Ako môžete vidieť z kódu, obrázok je prepojený prostredníctvom adresy URL uvedenej v zátvorkách. Nie všetky obrázky sú však také veľké, aby ich veľkosť zaplnila celú plochu obrazovky. Pozrime sa, ako sa zobrazí menší obrázok.

Predpokladajme, že vyvíjame webovú stránku o poézii a ako pozadie potrebujeme použiť obrázok Pegasa. Okrídlený kôň zosobní slobodu tvorivej myšlienky básnika!

Potrebujeme, aby sa obrázok raz zobrazil v strede obrazovky. Ale, bohužiaľ, prehliadač nerozumie našim vznešeným túžbam. A zobrazuje menší obrázok na pozadí stránky toľkokrát, koľkokrát sa do oblasti obrazovky zmestí:

Azda štyri usmievavé kone s krídlami budú pre básnikov priveľkou inšpiráciou. Preto zakazujeme klonovanie nášho Pegasa. Robíme to pomocou vlastnosti background-repeat. Možné hodnoty:

• repeat-x – zopakuje obrázok na pozadí vodorovne;
• repeat-y – vertikálne;
• opakovať – na oboch osiach;
• no-repeat – opakovanie je zakázané.

Spomedzi uvedených možností nás zaujíma posledná. Pred zmenou pozadia stránky ho používame v našom kóde:

Ale, samozrejme, bolo by lepšie, keby sa náš leták nachádzal v strede obrazovky. Vlastnosť background-position je presne určená na umiestnenie obrázka pozadia na stránke. Súradnice polohy môžete nastaviť niekoľkými spôsobmi:

• kľúčové slovo ( hore, dole, v strede, vľavo, vpravo);
• Percento – počítanie začína od ľavého horného rohu;
• V merných jednotkách (pixeloch).

Použime najjednoduchšiu možnosť centrovania:

Stáva sa, že pri posúvaní potrebujete opraviť polohu obrázka. Preto pred vytvorením obrázka ako pozadia stránky použite špeciálnu vlastnosť background-attachment . Hodnoty, ktoré akceptuje, sú:

• zvitok;


• pevné.

Potrebujeme poslednú hodnotu. Teraz bude náš príklad kódu vyzerať takto:

Webové stránky textúry pozadia

V prvom príklade sme ako pozadie použili veľkú a krásnu púštnu krajinu. Ale za takú krásu musíte zaplatiť v plnej výške. Hmotnosť vytvoreného obrazu vysoká kvalita, môže dosiahnuť niekoľko megabajtov.

Tento objem žiadnym spôsobom neovplyvňuje rýchlosť načítania stránky prehliadača s vysokorýchlostným internetovým pripojením. Ale čo už mobilný internet, ktorej načítanie niekoľkých „metrákov“ bude trvať dlho?

Všetky tieto problémy sú vyriešené pomocou textúrovaného pozadia. Používa malý obrázok ako vzor textúry. Aj keď sa to mnohokrát opakuje, kresba sa načíta iba raz.