Obrázok na pozadí html stránky. obrázok na pozadí

V html nie je pozadie pre stránku nastavené, píše sa cez css štýly, ale to je len teoretická formalita. A teraz poďme zistiť, ako definovať toto pozadie.

Pozadie pre stránku alebo samostatný blok

Keďže na dosiahnutie tohto cieľa potrebujeme súbor css, musíme ho vytvoriť a pripojiť k html. Toto je napísané v. Potom sa môžete pustiť do práce. Najprv sa musíte rozhodnúť, na čo chcete nastaviť pozadie. Ak je celá stránka ako celok, môžete to urobiť takto:

Telo (farba pozadia: biela; )

To znamená, že odkazujeme na značku body, ktorá predstavuje celú našu stránku. Vlastnosť background-color sa používa na nastavenie farby pozadia. Ale čo ak chcete nastaviť pozadie na grafiku namiesto plnej farby? Potom by ste mali napísať takto:

Body( Background-image: url (cesta k obrázku. rozšírenie obrázka) )

Pre prehľadnosť navrhujem zvážiť všetko podrobnejšie s príkladom. Na to použijem nasledujúci obrázok:

Napríklad obrázok na pozadí: url(comp.png) . V tomto príklade sme nastavili obrázok na pozadí s názvom comp (tak som to nazval) vo formáte png, ktorý je v rovnakom priečinku ako súbor css.
V html vytvorím ľubovoľný blok s konkrétnymi veľkosťami, aby som na ňom demonštroval prácu vlastností css.

A tu sú na to štýly:

#ct( Obrázok na pozadí: url(comp.png); šírka: 600px; výška: 400px; )

Tu je to, čo máme:

prečo je to tak? Faktom je, že v predvolenom nastavení prehliadač opakuje obrázok toľkokrát, aby úplne zaplnil blok. Niekedy je to potrebné, napríklad pri použití bezšvíkových ozdôb, ale v našom prípade by mal byť jeden obrázok. Našťastie sa to dá veľmi jednoducho zvládnuť.

opakujúce sa pozadie

Ak máte ako pozadie obrázok, štandardne sa to bude opakovať horizontálne a vertikálne, aby vyplnilo celý priestor stránky. Na odstránenie tohto sa používa vlastnosť background-repeat a jej hodnota je no-repeat (neopakovať). Existujú aj tieto hodnoty:

• Repeat-x - opakujte iba vodorovne
• Repeat-y - iba vertikálne

Pridajme k vlastnostiam nášho grafického pozadia:

background-repeat: no-repeat;

pozícia

Vlastnosť background-position určuje, kde bude obrázok umiestnený. Nastavujú sa tu dve hodnoty - horizontálne a vertikálne. Príklady: poloha na pozadí: vpravo dole - pozícia v pravom dolnom rohu, vľavo hore - v dolnom hornom rohu (štandardne atď.), 250 pixelov 500 pixelov - posunutie od ľavého horného rohu doprava o 250 pixelov a nadol o 500.

Pozrime sa lepšie na príklady:

pozícia na pozadí: vpravo hore;

Obrázok sa presunie na pravý horný okraj. Bloku som dal aj žltý podklad, aby bolo vidieť jeho okraje.

pozícia pozadia: 50 % 50 %;

Obraz sa objavil presne v strede v jeho bloku. Áno, áno, aj to je možné vďaka percentuálnemu rekordu pozície.

pozícia na pozadí: 70 % 20 %;

Pozadie je posunuté o 70 % horizontálne a 20 % vertikálne.

Je tiež povolené zadať zápornú hodnotu polohy v pixeloch. Dá sa to urobiť napríklad vtedy, keď použijete veľký obrázok sprite a potrebujete zablokovať požadovanú časť tohto spritu.

Pripnutie pozadia

Veľmi sa mi páči aj jedna vlastnosť s názvom background-attachment . Má iba dve hodnoty a prvá je predvolená (rolovanie). To znamená, že pri rolovaní stránky sa roluje aj pozadie a ak použijete obrázok bez opakovania, tak to nakoniec skončí a bude pokračovať len jednofarebná.

Aby sa tomu zabránilo, je napísané pozadie-attachment: fixed a teraz je naše pozadie bezpečne upevnené na svojom mieste. Dá sa to prirovnať k tomu, ako definovať pevnú pozíciu pre blok a ten nezmizne zo stránky pri rolovaní.

Skrátený záznam celej tejto dobroty

Analyzovali sme veľa vlastností, ktoré vám umožňujú vytvoriť pozadie, ale ak ich použijete všetky, dostanete ťažkopádny zápis. Existuje veľmi elegantné riešenie. Vlastnosť pozadia vám umožňuje zapísať potrebné nastavenia oddelené medzerou v tomto poradí:
Pozadie: pozícia pripínania opakovania farebného obrázka;
A teraz sa dá všetko napísať takto:

Pozadie: žltá url(comp.png) bez opakovania 20% 100px;

Ak niektorú vlastnosť netreba definovať, tak sa jednoducho vynechá (v našom prípade sme nepísali background-attachment).

Veľa pozadí

Čo ak však potrebujete viacero obrázkov na pozadí? Stáva sa, čo sa dá robiť. Dnes css podporuje túto funkciu. Skúsme to tiež. Vezmite túto ikonu

Pomenoval som ho laptop.

A tu je kód na vloženie multifónu:

Pozadie: url(comp.png) bez opakovania 20% 100px, url(laptop.png) bez opakovania 50% 50%; farba pozadia: žltá

Ako vidíte, všetko, čo musíte urobiť, je dať za prvý obrázok čiarku a nastaviť nastavenia pre druhý. Pevná farba je v tomto prípade lepšie nastaviť samostatne.

Rovnakým spôsobom môžete nahrať toľko obrázkov, koľko chcete, ale nepreháňajte to - príliš veľa grafiky nie je príliš dobré.

Tu by som chcel tento článok ukončiť. S pozadím sa dá robiť veľa iných zaujímavých vecí, pokúsim sa o nich napísať v budúcnosti (a už som niečo napísal - napríklad). Veľa šťastia s touto nehnuteľnosťou.

Od autora: Vítam všetkých. Farby pozadia a obrázky vo webdizajne zohrávajú obrovskú úlohu, pretože vám umožňujú atraktívnejšie navrhnúť akýkoľvek prvok. Ako urobiť pozadie v html, dnes sa pozrieme.

Dá sa vystačiť s html pri nastavovaní pozadia?

Hneď vám poviem, že nie. Vo všeobecnosti html nie je určené na navrhovanie webových stránok. Je to len veľmi nepohodlné. Existuje napríklad atribút bgcolor, ktorý sa dá použiť na nastavenie farby pozadia, čo je však veľmi nepohodlné.

Podľa toho použijeme kaskádové štýly (css). Možností nastavenia pozadia je oveľa viac. Dnes si rozoberieme tie najzákladnejšie.

Ako nastaviť pozadie pomocou css?

V prvom rade sa teda musíte rozhodnúť, ktorému prvku chcete nastaviť pozadie. To znamená, že musíme nájsť selektor, do ktorého budeme pravidlo zapisovať. Napríklad, ak potrebujete nastaviť pozadie pre celú stránku ako celok, môžete to urobiť pomocou selektora tela, pre všetky bloky pomocou selektora div. No atď. Pozadie môže a malo by byť pripojené k akýmkoľvek iným selektorom: triedam štýlov, identifikátorom atď.

Potom, čo ste sa rozhodli pre selektor, musíte napísať názov samotnej nehnuteľnosti. Na nastavenie farby pozadia (konkrétne plnej farby, nie gradientu a nie obrázka) sa používa vlastnosť background-color. Za ním musíte vložiť dvojbodku a napísať samotnú farbu. Dá sa to urobiť rôznymi spôsobmi. Napríklad pomocou kľúčových slov, hexadecimálneho kódu, formátov rgb, rgba, hsl. Postačí akákoľvek metóda.

Najčastejšie používanou metódou je hexadecimálny kód. Na výber farieb môžete použiť program, v ktorom vidíte kód farby. Napríklad photoshop, farba alebo nejaký online nástroj. Podľa toho napríklad predpíšem spoločné pozadie pre celú webovú stránku.

telo (farba pozadia: #D4E6B3; )

Tento kód je potrebné vložiť do sekcie hlavy. Je dôležité, aby boli súbory v rovnakom priečinku.

Obrázok ako pozadie

Pre obrázok použijem malú ikonu jazyka html:

Vytvorme prázdny blok s ID:

< div id = "bg" > < / div >

Dajme tomu explicitné rozmery a pozadie:

#bg( šírka: 400px; výška: 250px; obrázok na pozadí: url(html.png); )

#bg( šírka: 400px výška: 250px background-image : url (html . png ) ;

Z tohto kódu môžete vidieť, že som použil novú vlastnosť s názvom background-image. Je určený práve na vloženie obrázku ako pozadia do html prvku. Pozrime sa, čo sa stalo:

Ak chcete zadať obrázok, musíte za dvojbodkou napísať url kľúčového slova a potom zadať cestu k súboru v zátvorkách. V tomto prípade je cesta špecifikovaná na základe skutočnosti, že obrázok je v rovnakom priečinku ako html dokument. Musíte tiež určiť formát obrázka.

Ak ste to urobili a pozadie sa v bloku stále nezobrazuje, znova skontrolujte, či ste názov obrázka napísali správne, či je správne nastavená cesta a prípona. Toto sú najčastejšie dôvody, prečo sa pozadie jednoducho nezobrazuje, pretože prehliadač nevie nájsť obrázok.

Všimli ste si však jednu vlastnosť? Prehliadač vzal a znásobil obrázok v celom bloku. Takže, aby ste vedeli, toto je predvolené správanie obrázkov na pozadí – opakujú sa vertikálne a horizontálne, pokiaľ sa zmestia do bloku. Týmto správaním sa môžete ľahko riadiť. Na to použite vlastnosť background-repeat, ktorá má 4 hlavné hodnoty:

Opakovať - ​​predvolená hodnota, obrázok sa opakuje na oboch stranách;

Repeat-x - opakuje sa iba na osi x;

Repeat-y - opakuje sa iba pozdĺž osi y;

No-repeat – neopakuje sa vôbec;

Môžete napísať každú hodnotu a uvidíte, čo sa stane. Napíšem to takto:

background-repeat: repeat-x;

pozadie - repeat : repeat - x ;

Teraz opakujte iba vodorovne. Ak napíšete neopakovať, potom by bol iba jeden obrázok.

Skvelé, môžeme s tým skončiť, keďže toto sú základné funkcie práce s pozadím, ale ukážem vám ešte 2 vlastnosti, ktoré vám umožnia získať viac možností ovládania.

Pomocou opakovania kóderi dosiahli bod vytvárania textúr na pozadí a prechodov pomocou jedného malého obrázka. Mohlo by to byť 30 x 10 pixelov alebo dokonca menšie. Alebo možno trochu viac. Obraz bol taký, že keď sa to opakovalo na jednej alebo dokonca na oboch stranách, neboli viditeľné žiadne prechody, takže nakoniec sa získalo jediné pevné pozadie. Mimochodom, tento prístup sa teraz oplatí použiť, ak chcete na svojom webe použiť ako pozadie súvislú textúru. Gradient sa dnes už dá implementovať pomocou metód css3, o tom si určite povieme neskôr.

Pozícia pozadia

V predvolenom nastavení bude obrázok na pozadí, ak nie je nastavený na opakovanie, v ľavom hornom rohu jeho bloku. Pozíciu je však možné jednoducho zmeniť pomocou vlastnosti background-position.

Môžete sa ho opýtať rôznymi spôsobmi. Jednou z možností je jednoducho určiť strany, na ktorých by mal byť obrázok:

pozícia na pozadí: vpravo hore;

poloha pozadia: vpravo hore;

To znamená, že všetko zostalo rovnaké vertikálne: obrázok na pozadí je umiestnený navrchu, ale horizontálne sme zmenili stranu na pravú, teda pravú. Ďalším spôsobom nastavenia pozície je percentuálny podiel. V tomto prípade sa odpočítavanie v každom prípade začína od ľavého horného rohu. 100% - celý blok. Aby sme teda obrázok umiestnili presne do stredu, napíšeme ho takto:

pozícia pozadia: 50 % 50 %;

pozícia pozadia: 50 % 50 %;

Jedna dôležitá vec, ktorú si treba zapamätať pri umiestňovaní je, že prvým parametrom je vždy horizontálna poloha a druhým parametrom je vertikálna poloha. Ak teda uvidíte hodnotu 80% 20%, potom môžete okamžite usúdiť, že obrázok na pozadí bude výrazne posunutý doprava, ale nepôjde veľmi dole.

A nakoniec môžete určiť polohu v pixeloch. Všetko je po starom, len namiesto % bude px. V niektorých prípadoch môže byť potrebné aj takéto umiestnenie.

Skrátený zápis

Súhlaste s tým, že kód sa ukáže byť dosť ťažkopádny, ak je všetko nastavené tak, ako sme to urobili. Ukazuje sa, že je potrebné nastaviť cestu k obrázku, opakovanie a polohu. Samozrejme, opakovanie a umiestnenie nie je vždy potrebné, ale v každom prípade by bolo správnejšie použiť skratku vlastnosti. Vyzerá takto:

pozadie: #333 url(bg.jpg) bez opakovania 50 % 50 %;

pozadie : #333 url(bg.jpg) bez opakovania 50 % 50 %;

To znamená, že prvým krokom je v prípade potreby zaznamenať celkovú plnú farbu pozadia. Potom cesta k obrázku, opakovanie a poloha. Ak niektorý parameter nie je potrebný, jednoducho ho vynechajte. Súhlasíte, je to oveľa rýchlejšie a pohodlnejšie a výrazne znižujeme aj náš kód. Vo všeobecnosti vám odporúčam písať vždy skrátene, aj keď potrebujete zadať iba farbu alebo obrázok.

Ovládanie veľkosti obrázka na pozadí

Náš súčasný obrázok sa veľmi nehodí na ďalší trik, takže vezmem iný. Vo veľkosti nech je ako blok alebo väčší ako on. Predstavte si teda, že stojíte pred úlohou vytvoriť obrázok na pozadí tak, aby úplne nevyplnil svoj blok. A napríklad obrázok je ešte väčší ako veľkosť bloku.

Čo sa dá v takomto prípade robiť? Samozrejme, najjednoduchšou a najrozumnejšou možnosťou by bolo jednoducho zmenšiť obrázok, ale nie vždy je to možné. Povedzme, že leží na serveri a momentálne nie je čas a príležitosť to zredukovať. Problém je možné vyriešiť pomocou vlastnosti background-size, ktorú možno nazvať relatívne novou a ktorá vám umožňuje manipulovať s veľkosťou obrázka na pozadí a vlastne akéhokoľvek pozadia.

Takže môj obrázok teraz zaberá celý priestor v bloku, ale dám mu veľkosť pozadia:

veľkosť pozadia: 80 % 50 %;

veľkosť pozadia: 80 % 50 %;

Opäť platí, že prvým parametrom je horizontálna veľkosť, druhým je vertikálna veľkosť. Vidíme, že všetko bolo aplikované správne - fotografia má šírku 80% šírky bloku a polovicu výšky. Tu stačí urobiť jedno upresnenie - nastavením veľkosti v percentách môžete ovplyvniť proporcie obrázka. Buďte teda opatrní, ak nechcete narušiť proporcie.

Ako asi tušíte, veľkosť pozadia môže byť špecifikovaná aj v pixeloch. Existujú aj dve hodnotné kľúčové slová, ktoré možno tiež použiť:

Obálka – obrázok bude zmenšený tak, aby aspoň jedna jeho strana úplne vypĺňala blok.

Obsah - mierka tak, aby sa obrázok úplne zmestil do bloku pri jeho maximálnej veľkosti.

Výhodou týchto hodnôt je, že nemenia proporcie obrazu a ponechajú ich rovnaké.

Tiež by ste mali pochopiť, že natiahnutie obrazu môže viesť k zhoršeniu jeho kvality. Môžem uviesť príklad zo života a reálnej praxe dispozičných dizajnérov. Každý vie a chápe, že pri navrhovaní pre stolné počítače je potrebné prispôsobiť stránku šírke hlavného monitora: 1280, 1366, 1920. Ak nafotíte obrázok na pozadí s veľkosťou povedzme 1280 x 200 a nenastavíte veľkosť pozadia na Ak sa potom objavia obrazovky so šírkou väčšou ako prázdne miesto, obraz nevyplní celú šírku.

Web developerovi to v 99% prípadov nevyhovuje a tak nastaví background-size: cover tak, aby sa obrázok vždy natiahol na maximálnu šírku okna. Toto je dobrý trik, ale teraz narazíte na problém, že používatelia so šírkou obrazovky 1920 pixelov môžu vidieť neoptimálnu kvalitu obrazu.

Pripomínam, že sa natiahne do maximálnej šírky. V súlade s tým sa kvalita automaticky zhorší. Jediným správnym riešením by bolo na začiatku použiť väčší obrázok - 1920 pixelov na šírku. Potom bude na najširších obrazovkách vo svojej prirodzenej veľkosti a na iných sa jednoducho pomaly odreže, ale zároveň to pri kompetentnom výbere obrázka na pozadí neovplyvní vzhľad stránky.

Celkovo vzaté, toto je len 1 príklad, ako aplikovať znalosti, ktoré ste získali v tomto článku, na reálne rozloženia.

priesvitné pozadie s css

Ďalšou funkciou, ktorú je možné implementovať pomocou css, je priesvitné pozadie. To znamená, že cez toto pozadie bude možné vidieť, čo je za tým.

Ako príklad nastavím pozadie celej stránky na obrázok, ktorý sme použili skôr v príkladoch. Pre blok s identifikátorom bg, na ktorom robíme všetky naše experimenty, nastavíme pozadie pomocou formátu nastavenia farieb rgba.

Ako som už povedal, v css existuje veľa formátov na nastavenie farieb. Jedným z nich je rgb, pomerne známy formát pre tých, ktorí pracujú v grafických editoroch. Píše sa takto: rgb(17, 255, 34);

Prvá hodnota v zátvorkách je sýtosť červenej, potom zelenej a potom modrej. Hodnota môže byť numerická od 0 do 255. Formát rgba sa teda nelíši, pridáva sa iba jeden parameter - alfa kanál. Hodnota môže byť od 0 do 1, kde 0 je úplná priehľadnosť.

Každá miestnosť bude vyzerať oveľa lepšie s drahým perzským kobercom na podlahe. Čo je teda na vašej stránke zlé? 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 stránku:

Pozadie pre stránku

Stáva sa, že starý dizajn stránok je už nudný. A chcem niečo nové a chutné. A nový dizajn bude taký, ak si ho uvaríte sami.

Ale zmeniť celý dizajn zdroja svojpomocne je nevďačná vec. A nie každý má na tento biznis poriadne „nabrúsené“ ruky. Preto je najjednoduchšie obnoviť starú šablónu zmenou farby pozadia zdroja alebo obrázka pozadia.

Existuje niekoľko spôsobov, ako zmeniť pozadie na webovej stránke. Na to sa využívajú možnosti CSS alebo html. Ale mnoho vlastností na pozadí má rovnaký názov a použitie v týchto webových technológiách.

Základy HTML pozadia

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 pre lokalitu, použite vlastnosť background-color atribútu style. To znamená, že ak chcete nastaviť hlavnú farbu webovej stránky, musíte ju zaregistrovať v rámci značky . Napríklad:

Pozadie webovej stránky #55D52B

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

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

Pozadie webovej stránky zelené

Nastavenie farby pozadia pomocou kľúčových slov má v porovnaní s ostatnými dvoma spôsobmi množstvo obmedzení.

V html je podporovaných iba 16 farebných kľúčových slov. Tu je niekoľko z nich: biela, červená, modrá, čierna, žltá a ďalšie.

Preto, aby ste nastavili pozadie pre html stránku, je lepšie použiť hex alebo RGB.

Okrem výberu farieb sú k dispozícii aj ďalšie možnosti prispôsobenia. Nastavením vlastnosti background-color na transparentné bude pozadie stránky transparentné. Táto hodnota je predvolene priradená tejto vlastnosti.

Teraz sa pozrime na možnosti hypertextového jazyka pre nastavenie pozadia pre stránku. Dá sa to urobiť pomocou vlastnosti background-image.

Ako môžete vidieť z kódu, obrázok je viazaný cez cestu url uvedenú v zátvorkách. Nie všetky obrázky sú však také veľké, aby svojou veľkosťou vyplnili celú plochu obrazovky. Pozrime sa, ako sa zobrazí menší obrázok.

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

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

Asi štyri usmievavé kone s krídlami budú pre básnikov na inšpiráciu priveľa. 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 týchto možností nás zaujíma posledná. Pred zmenou pozadia stránky ho používame v našom kóde:

Ale, samozrejme, je lepšie, ak je náš leták umiestnený v strede obrazovky. Vlastnosť background-position slúži len 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 - odpočítavanie začína od ľavého horného rohu;
• V jednotkách merania (pixeloch).

Na centrovanie použijeme najjednoduchšiu možnosť:

Stáva sa, že pri posúvaní potrebujete opraviť polohu obrázka. Preto predtým, ako vytvoríte obrázok na pozadí stránky, použite špeciálnu vlastnosť background-attachment . Hodnoty, ktoré akceptuje, sú:

• rolovať;


• 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ť kvalitného obrazu môže dosiahnuť niekoľko megabajtov.

Takýto objem neovplyvňuje rýchlosť načítania stránky prehliadačom s vysokorýchlostným internetovým pripojením. Ako je to však s mobilným internetom, pri ktorom sťahovanie niekoľkých „metrov“ zaberie veľa času?

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

Ak chcete vytvoriť tmavé pozadie stránky, prejdite do Photoshopu, vytvorte obrázok vo forme pásu s dĺžkou 1200 pixelov a šírkou 15 pixelov. Potom aplikujeme jednoduchý čiernobiely gradient a výslednú textúru pripojíme k stránke webu:

CSS nástroje

Všetky vlastnosti opísané vyššie platia aj pre kaskádové štýly. Poďme vytvoriť pozadie webovej stránky css prepísaním jedného z našich predchádzajúcich príkladov.

Ak potrebujete usporiadať dokument v programe Microsoft Word nielen správne, ale aj krásne, potom je lepšie použiť nejaký obrázok na pozadí. Môže si ju vziať každý, ale je lepšie, aby zodpovedala tlačenému textu. Môže to byť aj logo alebo názov spoločnosti. Ak ich umiestnite za text, vyzerá to krajšie ako vodoznak alebo pozadie a priťahuje viac pozornosti.

V článku zvážime túto tému a naučíme sa, ako vytvoriť obrázok na pozadí v programe MS Word.

Pridajte obrázok cez príslušnú položku ponuky

Vo Worde 2007, 2010 a 2013 môžete vybrať obrázok pre stránku nasledovne. Otvorte požadovaný dokument a prejdite na kartu "Rozloženie stránky". Potom kliknite na tlačidlo "Farba stránky" a vyberte z ponuky.

Ak máte nainštalovaný Word 2016, potom v otvorenom dokumente prejdite na kartu „Návrh“ a potom urobte všetko, ako je popísané vyššie: "Farba stránky" - "Metódy výplne".

Otvorí sa malé dialógové okno. V ňom prejdite na kartu „Obrázok“ a kliknite na tlačidlo s rovnakým názvom, ktoré sa nachádza pod prázdnou oblasťou v strede.

V programe Word 2016 sa to zobrazí pred oknom zobrazeným na snímke obrazovky vyššie. V ňom si môžete vybrať, odkiaľ chcete vložiť obrázok, môže to byť obrázok z počítača alebo nájsť ten, ktorý potrebujete pomocou vyhľadávania.

Po výbere obrázka kliknite na tlačidlo "OK" v príslušnom okne.

Výhodou tejto metódy je, že vami zvolené pozadie sa vzťahuje na všetky strany dokumentu.

Nevýhodou je, že obrázok musí mať správnu veľkosť. Ako vidíte, v príklade je viditeľný iba jeden tučniak. Preto potrebujem uložiť tento obrázok v inej veľkosti pomocou nejakého editora, napríklad Paint.

Vytvorenie obrázka na pozadí stránky

Pozrime sa na ďalší spôsob, ako môžete vytvoriť požadovaný obrázok na pozadí.

Otvorte dokument a prejdite na kartu. Potom kliknite na tlačidlo Obrázok a pridajte ho na stránku.

V ďalšom okne nájdite, čo sa hodí do vášho počítača, vyberte a kliknite na „Prilepiť“.

Po pridaní obrázka naň kliknite pravým tlačidlom myši a vyberte z kontextového menu "Zalomiť text" - "Za textom".

Teraz sa všetok text, ktorý je v dokumente, zobrazí pred obrázkom. Ak chcete, aby sa vybraný obrázok stal pozadím celého listu a odstránili sa biele okraje, musíte ho roztiahnuť. Ak to chcete urobiť, kliknite na obrázok. Po okrajoch sa okamžite objavia značky – bodky v rohoch a jedna bodka na každej strane. Pomocou týchto značiek roztiahnite rám na šírku a výšku tak, aby pokryl celý list.

Takto sa mi to stalo. Výhodou metódy je, že si môžete nezávisle vybrať, ktorá časť obrázka sa zobrazí na hárku: celá, alebo ju môžete natiahnuť a urobiť tak, aby sa zobrazila iba určitá oblasť.

Ak však potrebujete použiť jeden obrázok a v dokumente je veľa strán, potom je lepšie vybrať veľkosť, ktorá mu vyhovuje, a urobiť z neho pozadie, ako je popísané v prvom odseku.

Vaše dokumenty budú vyzerať zaujímavejšie, keď ako pozadie stránok umiestnite vhodný obrázok. Nezabudnite, že text by sa na vybranom pozadí nemal stratiť a mal by zodpovedať textu.

Hodnotiť článok:

Pri nastavovaní akejkoľvek stránky je okrem funkčnosti veľmi dôležitý aj dizajn. To určuje štýl a dizajn konkrétnej spoločnosti alebo osoby, pre ktorú je stránka vytvorená. Úprava farby pozadia a jeho obrázku nie je náročná 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 okamžite neuvidia obrázok na pozadí stránky. Po určitú dobu, kým sa obrázok načíta, budú môcť vidieť iba farbu vášho webu.
Zadajte značku parameter bgcolor=”*****”, kde ***** je farebná šifra. Farby pre HTML môžete zistiť v akomkoľvek grafickom editore 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 vybratí 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 vložte požadovaný obrázok do priečinka s kódom. Pomenujte ho latinkou.

Teraz zistite umiestnenie súboru tak, že naň kliknete pravým tlačidlom myši, vyberiete riadok „Otvoriť pomocou“ a kliknete na ľubovoľný prehliadač nainštalovaný v počítači.

Skopírujte adresu z vyhľadávacieho panela prehliadača.

Teraz v tagu 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.

Upozorňujeme, že pre používateľov s vyšším rozlíšením obrazovky bude váš obrázok duplikovaný nadol a doprava. Nebude to vyzerať dobre, ak obrázok nebude čistý. Na opravu tohto nastavenia existujú špeciálne príkazy.

• pozadie-opakovanie: „Hodnota“. Možnosti pre vašu hodnotu môžu byť: "repeat-x" - zopakuje obrázok na pozadí horizontálne aj vertikálne. "repeat-y" - opakujte iba vertikálne. „no-repeat“ – obraz zamrzne na mieste a neopakuje sa. "medzera" - celá strana bude vyplnená maximálnym počtom kópií obrázku, vonkajšie budú orezané. "okrúhle" - rovnaká možnosť, ale okraje obrázka budú presne prispôsobené;
• background-attachment: "Hodnota". Ak namiesto slova Hodnota nahradíte značku „scroll“, obrázok sa bude posúvať spolu s webom. „pevné“ - pri rolovaní zostáva pozadie 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í stránku obrázkom pozdĺž dlhej strany a „obálka“ – vyplní stránku obrázkom po šírke.

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