První text

Druhý text

Pokud potřebujete naformátovat dokument v textovém editoru Microsoft Word nejen správně, ale také krásně, je lepší použít nějaký druh kresby na pozadí. Můžete si vzít jakýkoli, ale je lepší, aby odpovídal tištěnému textu. Může to být také logo nebo název společnosti. Pokud je umístíte za text, vypadá to lépe než vodoznak nebo pozadí a přitáhne více pozornosti.

V tomto článku se podíváme na toto téma a naučíme se, jak vytvořit obrázek jako pozadí v MS Word.

Přidejte obrázek pomocí příslušné položky nabídky

Zde je návod, jak můžete vybrat obrázek pro stránku ve Wordu 2007, 2010 a 2013. Otevřete požadovaný dokument a přejděte na kartu "Rozvržení stránky". Poté klikněte na tlačítko „Barva stránky“ a vyberte z nabídky.

Pokud máte nainstalovaný Word 2016, přejděte v otevřeném dokumentu na kartu „Návrh“ a poté proveďte vše, jak je popsáno výše: „Barva stránky“ – „Metody výplně“.

Otevře se malé dialogové okno. V něm přejděte na kartu „Výkres“ a klikněte na tlačítko se stejným názvem, které se nachází pod prázdnou oblastí uprostřed.

Ve Wordu 2016 se to objeví před oknem zobrazeným na snímku obrazovky výše. V něm si můžete vybrat, odkud chcete vložit obrázek, může to být obrázek z vašeho počítače nebo najít to, co potřebujete, pomocí vyhledávání.

Po výběru obrázku klikněte v příslušném okně na „OK“.

Výhodou této metody je, že vámi vybrané pozadí platí pro všechny stránky v dokumentu.

Nevýhodou je, že obrázek musí mít správnou velikost. Jak vidíte, v příkladu je vidět pouze jeden tučňák. Potřebuji tedy uložit tento obrázek s jinou velikostí pomocí nějakého editoru, například Malování.

Vytvoření obrázku na pozadí stránky

Podívejme se na jiný způsob, jak vytvořit požadovaný obrázek jako pozadí.

Otevřete dokument a přejděte na kartu. Poté klikněte na tlačítko "Obrázek" a přidejte jej na stránku.

V dalším okně vyhledejte, co vám na vašem počítači vyhovuje, vyberte jej a klikněte na „Vložit“.

Po přidání obrázku na něj klikněte pravým tlačítkem a vyberte z kontextové nabídky „Zalomení textu“ – „Za textem“.

Nyní se veškerý text, který je v dokumentu, zobrazí před obrázkem. Aby se vybraný obrázek stal pozadím celého listu a odstranil se bílé okraje, musíte jej roztáhnout. Chcete-li to provést, klikněte na obrázek. Po okrajích se okamžitě objeví značky – tečky v rozích a jedna tečka na každé straně. Pomocí těchto značek roztáhněte rám na šířku a výšku, aby pokryl celý list.

Mně se to stalo takhle. Výhodou této metody je, že si můžete nezávisle vybrat, která část obrázku bude zobrazena na listu: celá, nebo ji můžete roztáhnout a vytvořit tak, aby se zobrazila pouze určitá oblast.

Pokud však potřebujete použít jeden obrázek a v dokumentu je mnoho stránek, je lepší zvolit velikost, která je pro něj vhodná, a vytvořit z něj pozadí, jak je popsáno v prvním odstavci.

Vaše dokumenty budou vypadat zajímavěji poté, co vložíte vhodný obrázek jako pozadí stránek. Nezapomeňte, že na vybraném pozadí by se neměl ztratit žádný text a měl by odpovídat textu.

Ohodnoťte tento článek:

Od autora: Zdravím všechny. Barvy pozadí a obrázky hrají ve webovém designu obrovskou roli, protože vám umožňují navrhnout jakékoli prvky atraktivněji. Dnes se podíváme na to, jak udělat pozadí v HTML.

Je možné použít HTML pro nastavení pozadí?

Hned řeknu, že ne. Obecně platí, že html nebylo vytvořeno pro návrh webových stránek. Je to prostě velmi nepohodlné. Existuje například atribut bgcolor, pomocí kterého můžete nastavit barvu pozadí, ale to je velmi nepohodlné.

V souladu s tím použijeme kaskádové styly (CSS). Příležitostí pro nastavení pozadí je mnohem více. Dnes se podíváme na ty nejzákladnější.

Jak nastavit pozadí pomocí css?

Nejprve se tedy musíte rozhodnout, kterému prvku chcete pozadí nastavit. To znamená, že musíme najít selektor, do kterého budeme psát pravidlo. Pokud například potřebujete nastavit pozadí pro celou stránku jako celek, můžete to udělat pomocí selektoru těla a pro všechny bloky pomocí selektoru div. No atd. Pozadí může a mělo by být vázáno na jakékoli další selektory: třídy stylů, identifikátory atd.

Poté, co se rozhodnete pro selektor, musíte napsat název samotné nemovitosti. Chcete-li nastavit barvu pozadí (konkrétně plnou barvu, nikoli přechod nebo obrázek), použijte vlastnost background-color. Za ním je třeba dát dvojtečku a napsat samotnou barvu. To lze provést různými způsoby. Například pomocí klíčových slov, hex kódu, formátů rgb, rgba, hsl. Postačí jakákoli metoda.

Nejčastěji používanou metodou je hexadecimální kód. K výběru barev můžete použít program, který zobrazí kód barvy. Například photoshop, malování nebo nějaký online nástroj. Podle toho jako příklad napíšu obecné pozadí pro celou webovou stránku.

tělo (barva pozadí: #D4E6B3; )

Tento kód je třeba vložit do sekce hlavy. Je důležité, aby byly soubory ve stejné složce.

Obrázek jako pozadí

Pro obrázek použiji malou ikonu jazyka html:

Vytvořme prázdný blok s identifikátorem:

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

Dejme tomu explicitní rozměry a pozadí:

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

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

Z tohoto kódu můžete vidět, že jsem použil novou vlastnost - background-image. Je určen speciálně pro vložení obrázku jako pozadí do html prvku. Podívejme se, co se stalo:

Chcete-li zadat obrázek, musíte za dvojtečkou napsat klíčové slovo url a v závorkách uvést cestu k souboru. V tomto případě je cesta určena na základě skutečnosti, že obrázek je ve stejné složce jako html dokument. Musíte také určit formát obrázku.

Pokud jste tak učinili a pozadí se v bloku stále nezobrazuje, znovu zkontrolujte, zda jste správně napsali název obrázku, zda je správně nastavena cesta a přípona. To jsou nejčastější důvody, proč se pozadí prostě nezobrazí, protože prohlížeč nemůže obrázek najít.

Ale všimli jste si jedné věci? Prohlížeč vzal a znásobil obrázek v celém bloku. Takže, abyste věděli, toto je výchozí chování obrázků na pozadí – opakují se svisle i vodorovně, dokud se vejdou do bloku. Tímto chováním můžete snadno ovládat. K tomu použijte vlastnost background-repeat, která má 4 hlavní hodnoty:

Repeat – výchozí hodnota, obraz se opakuje na obě strany;

Repeat-x – opakuje se pouze na ose x;

Repeat-y – opakuje se pouze podél osy y;

No-repeat – neopakuje se vůbec;

Můžete napsat každou hodnotu a uvidíte, co se stane. Napíšu to takto:

background-repeat: repeat-x;

pozadí - opakovat : opakovat - x ;

Nyní opakujte pouze vodorovně. Pokud nastavíte neopakování, bude pouze jeden obrázek.

Skvělé, zde můžeme skončit, protože toto jsou základní možnosti práce s pozadím, ale ukážu vám další 2 vlastnosti, které vám umožní získat větší kontrolu.

Prostřednictvím opakování byli návrháři rozvržení schopni vytvořit textury pozadí a přechody pomocí jednoho malého obrázku. Mohlo by to být 30 x 10 pixelů nebo dokonce menší. Nebo možná trochu víc. Obraz byl takový, že když se to opakovalo na jednu nebo dokonce na obě strany, nebyly vidět žádné přechody, takže výsledkem bylo jediné, bezešvé pozadí. Mimochodem, tento přístup se nyní vyplatí použít, pokud chcete na svém webu použít jako pozadí bezešvou texturu. Dnes již lze gradient implementovat pomocí metod css3, o tom si určitě povíme později.

Pozice pozadí

Ve výchozím nastavení bude obrázek na pozadí, pokud není nastaven na opakování, v levém horním rohu svého bloku. Pozici lze ale snadno změnit pomocí vlastnosti background-position.

Můžete to nastavit různými způsoby. Jednou z možností je jednoduše označit strany, na kterých by měl být obrázek umístěn:

pozadí-pozice: vpravo nahoře;

pozadí - pozice : vpravo nahoře ;

To znamená, že vertikálně vše zůstává stejné: obrázek na pozadí je umístěn nahoře, ale vodorovně jsme změnili stranu vpravo, tedy vpravo. Dalším způsobem, jak nastavit pozici, je procento. V tomto případě začíná odpočítávání v každém případě od levého horního rohu. 100 % - celý blok. Abychom tedy umístili obrázek přesně do středu, napíšeme jej takto:

pozice pozadí: 50 % 50 %;

pozice pozadí: 50 % 50 %;

Při polohování si pamatujte jednu důležitou věc – prvním parametrem je vždy horizontální poloha a druhým je vertikální poloha. Pokud tedy uvidíte hodnotu 80% 20%, pak můžete okamžitě usoudit, že obrázek na pozadí bude výrazně posunutý doprava, ale nepůjde moc dolů.

A nakonec můžete určit polohu v pixelech. Vše je při starém, jen místo % bude px. V některých případech může být takové umístění nezbytné.

Těsnopisný zápis

Souhlasíte s tím, že kód se ukáže být docela těžkopádný, pokud je vše nastaveno tak, jak jsme to udělali. Ukazuje se, že je třeba specifikovat cestu k obrázku, opakování a pozici. Opakování a pozice samozřejmě nejsou vždy nutné, ale v každém případě by bylo správnější použít pro vlastnost zkrácený zápis. Vypadá to takto:

pozadí: #333 url(bg.jpg) bez opakování 50 % 50 %;

pozadí: #333 url(bg.jpg) bez opakování 50 % 50 %;

To znamená, že prvním krokem je v případě potřeby zaznamenat celkovou plnou barvu pozadí. Pak cesta k obrázku, opakování a pozice. Pokud některý parametr není potřeba, jednoduše jej vynechejte. Souhlasíte, je to mnohem rychlejší a pohodlnější a také výrazně redukujeme náš kód. Obecně doporučuji psát vždy zkráceně, i když potřebujete uvést pouze barvu nebo obrázek.

Ovládání velikosti obrázku na pozadí

Náš současný obrázek není příliš dobrý pro předvedení dalšího triku, takže vezmu jiný. Nechť je to velikost bloku nebo větší. Představte si tedy, že stojíte před úkolem vytvořit obrázek na pozadí tak, aby zcela nevyplňoval svůj blok. A například obrázek je ještě větší než velikost bloku.

Co můžete v tomto případě dělat? Nejjednodušší a nejrozumnější možností by bylo samozřejmě obrázek jednoduše zmenšit, ale ne vždy je to možné. Řekněme, že je na serveru a v tuto chvíli není čas ani příležitost to redukovat. Problém lze vyřešit pomocí vlastnosti background-size, kterou lze nazvat relativně novou a která umožňuje manipulovat s velikostí obrázku na pozadí a vlastně jakéhokoli pozadí.

Můj obrázek nyní zabírá veškerý prostor v bloku, ale dám mu velikost pozadí:

velikost pozadí: 80 % 50 %;

velikost pozadí: 80 % 50 %;

Opět platí, že první parametr nastavuje horizontální velikost, druhý - vertikální velikost. Vidíme, že vše bylo aplikováno správně - fotografie se stala 80% šířky bloku na šířku a polovinu na výšku. Zde si stačí jen upřesnit – nastavením velikosti v procentech můžete ovlivnit proporce obrázku. Takže buďte opatrní, pokud nechcete narušit proporce.

Jak můžete hádat, velikost pozadí může být také specifikována v pixelech. Existují dvě další klíčová slova, která lze také použít:

Obálka – obrázek bude zmenšen tak, aby alespoň na jedné straně zcela vyplnil blok.

Obsah – změní měřítko tak, aby se obrázek ve své maximální velikosti zcela vešel do bloku.

Výhodou těchto hodnot je, že nemění proporce obrázku a ponechávají je stejné.

Měli byste také pochopit, že roztažení obrazu může vést ke zhoršení jeho kvality. Mohu uvést příklad ze života a reálné praxe dispozičních designérů. Každý ví a chápe, že při navrhování pro stolní počítače je třeba přizpůsobit web šířkám hlavního monitoru: 1280, 1366, 1920. Pokud vezmete obrázek na pozadí, řekněme, 1280 x 200 a nedáte mu pozadí- velikost, pak obrazovky o šířce větší Objeví se prázdné místo, obrázek nevyplní šířku úplně.

V 99 % případů to webovi vývojáři nevyhovuje, a tak nastaví background-size: cover tak, aby se obrázek vždy roztáhl na maximální šířku okna. Je to dobrá technika, ale nyní budete čelit problému, že uživatelé s šířkou obrazovky 1920 pixelů mohou vidět suboptimální kvalitu obrazu.

Připomínám, že se roztáhne do maximální šířky. V souladu s tím se kvalita automaticky zhorší. Jediným správným řešením by zde bylo zpočátku použít větší obrázek – 1920 pixelů na šířku. Pak na nejširších obrazovkách bude ve své přirozené velikosti a na ostatních bude jednoduše postupně oříznut, ale zároveň, pokud správně vyberete obrázek na pozadí, nebude to mít vliv na vzhled webu.

Obecně je toto pouze 1 příklad toho, jak využít znalosti získané v tomto článku při sestavování skutečných rozvržení.

Průsvitné pozadí pomocí css

Další funkcí, kterou lze implementovat pomocí css, je průsvitné pozadí. To znamená, že prostřednictvím tohoto pozadí bude možné vidět, co je za tím.

Jako příklad nastavím celou stránku jako pozadí obrázku, který jsme použili dříve v příkladech. Pro blok s identifikátorem bg, na kterém provádíme všechny naše experimenty, nastavíme pozadí pomocí formátu nastavení barev rgba.

Jak jsem řekl dříve, existuje mnoho formátů pro nastavení barev v CSS. Jedním z nich je rgb, poměrně známý formát pro ty, kteří pracují v grafických editorech. Píše se takto: rgb(17, 255, 34);

První hodnota v závorce je sytost červené, pak zelené a pak modré. Hodnota může být číselná od 0 do 255. V souladu s tím se formát rgba neliší, pouze je přidán další parametr - alfa kanál. Hodnota může být od 0 do 1, kde 0 je úplná průhlednost.

Při zakládání jakéhokoli webu je kromě funkčnosti velmi důležitý design. Právě ten určuje vlastní styl a design konkrétní společnosti nebo osoby, pro kterou web vzniká. Přizpůsobení barvy pozadí a obrázku je snadné podle pokynů v tomto článku.

Otevřete soubor HTML pomocí programu Poznámkový blok nebo jiného textového editoru, na který jste zvyklí.

Vezměme si například primitivní webovou stránku s minimem textu. Soubor můžete otevřít pomocí libovolného prohlížeče.
Nejprve změňte barvu pozadí, protože lidé s pomalým internetovým připojením nebudou moci okamžitě vidět obrázek na pozadí webu. Během načítání obrázku budou po určitou dobu vidět pouze barvu vašeho webu. Zadejte značku

parametr bgcolor=”*****”, kde ***** je kód barvy. Barvy pro HTML můžete zjistit v libovolném grafickém editoru výběrem možnosti „pro web“ nebo na webu https://colorscheme.ru/color-names

Stačí vybrat barvu v kruhové paletě a přiřadit její intenzitu v rámci čtverce. Vpravo uvidíte dva kódy pro html. Zkopírujte je a vložte do poznámkového bloku.

Po výběru barvy a jejím vložení do kódu zkontrolujte, zda jste udělali vše správně, zobrazením výsledné webové stránky z prohlížeče.

Nyní můžete začít vkládat obrázek na pozadí. Pro větší pohodlí umístěte požadovaný obrázek do složky s kódem. Dejte mu jméno latinkou.

Nyní zjistěte umístění souboru tak, že na něj kliknete pravým tlačítkem, vyberete „Otevřít pomocí“ a kliknete na libovolný prohlížeč nainstalovaný v počítači.

Zkopírujte adresu z vyhledávacího pole prohlížeče. Nyní ve značce

• zadejte řádek:

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

Uložte soubor.

Zkontrolujte svou webovou stránku. Uvidíte, že pozadí je nahrazeno vaším textem.

• background-repeat : "Hodnota." Možnosti pro vaši hodnotu mohou být: „repeat-x“ – zopakuje obrázek na pozadí vodorovně i svisle. „repeat-y“ – opakování pouze svisle. „no-repeat“ – obraz zamrzne na místě a neopakuje se. „mezera“ – celá stránka bude vyplněna maximálním počtem kopií obrázku, krajní budou oříznuty. „kulatý“ – stejná možnost, ale okraje obrázku budou pečlivě zmenšeny;
• background-attachment: "Hodnota." Pokud místo slova Hodnota nahradíte značku „scroll“, bude se obrázek posouvat spolu s webem. „fixed“ – pozadí zůstává při rolování nezměněno;
• background-size: Hodnota Hodnota2. Zde musí mít hodnoty hodnotu v pixelech. Například: 100px 200px. Kromě pixelů jsou přijímány i procentuální hodnoty. Toto je možnost vyplnit stránku obrázkem. Kromě čísel můžete zadat dva parametry: „contain“ – vyplní stránku obrázkem podél dlouhé strany a „cover“ – vyplní stránku obrázkem po šířce.

Jakmile budete znát základy vyplňování stránky pozadím v HTML, jste připraveni vytvořit svůj první web.

Pro vytvoření webu je důležitá otázka, jak vytvořit pozadí v html. Tento postup zahrnuje použití určitých značek - kódových slov a písmen. Díky nim můžete dát jiné pozadí, udělat ho monochromatickým - vyplnit, nebo dát na místo pozadí libovolný obrázek. Takové akce budou velmi užitečné pro všechny návrháře rozvržení a pro ty, kteří se rozhodnou „obléknout“ svůj web sami.

Tvorba pozadí

Než vytvoříte html pozadí webu, musíte otevřít html kód stránky v textovém editoru. Je třeba si uvědomit, že značky na stránce jsou umístěny svisle. Pak mezi značky … , musíte vložit značku- tyto značky jsou potřebné k objasnění stylu prvků dané webové stránky. Místo tří teček musíte napsat - tělo (pozadí:) . Toto je možnost, která umožňuje nastavit různé styly pro pozadí stránky. Operaci nastavení barev můžete provést dvěma způsoby. První:

Body (background:#000000) – pozadí stránky by nyní mělo být černé.

Tento způsob je vhodný i pro nastavení barvy i obrázku na pozadí. Za dvojtečku můžete vložit kód barvy nebo odkaz na obrázek. Nebo můžete použít metodu, která znamená pouze nastavení barvy – konkrétní výplně stránky. Za dvojtečkou je potřeba napsat tzv. parametr – barvu. A za ním vložte kód samotné barvy. Tato metoda je dobrá, pokud ji použijete jako šablonu. Zapište si to a uložte a v případě potřeby nastavte barvu a vložte ji na stránku.

Místo obyčejného pozadí můžete umístit obrázek. Pokud potřebujete zjistit: v html, jak udělat obrázek jako pozadí, je třeba provést podobné operace. Napište tagy, vložte tělo (pozadí: odkaz na obrázek). Musíme si uvědomit, že samotný obrázek může být kdekoli. A na webu na internetu, ale nejlepší je vytvořit složku v kořenovém adresáři dokumentu. Ve složce, ve které budou uloženy všechny informace o stránce webu, musíte vytvořit další - pro obrázky. Operace bude vypadat takto:

Nyní bude vámi vybraný obrázek pozadím celé stránky webu. Doufáme, že rozumíte tomu, jak vytvořit pozadí v html. Jen to zkoušejte a všechno určitě vyjde!