Vytvořte pozadí webové stránky. Jak roztáhnout pozadí na celou šířku okna? Je možné použít HTML pro nastavení pozadí?

Nastavení barvy pozadí a/nebo obrázku pro stránku nebo její jednotlivé prvky je poměrně jednoduché. Hlavní věc je vědět, kde a jak to udělat, stejně jako mít barevný kód a / nebo obrázek na pozadí. Je možné, že se z tohoto článku dozvíte spoustu nových věcí, ale vytvořil jsem ho speciálně pro začátečníky. Vše proto bude co nejkratší a co nejpodrobnější zároveň. Hlavní věc je, že dostanete nejen obecný nápad a hotové příklady, ale také pochopení toho, jak vytvořit pozadí v HTML.

Chcete-li nastavit pozadí v HTML, použijte mezilehlý DOCTYPE

A začnu tím, že v HTML5 není možné nastavit. Bylo rozhodnuto přidat tuto funkci do CSS. Pokud tedy plánujete používat následující a chcete získat platný (správný) kód, musíte zvolit typ přechodného dokumentu. Chcete-li to provést, musí vaše webová stránka začínat následujícím řádkem:

Přechodné//CS" "http://www.w3.org/TR/html4/loose.dtd">

S tím mimo, pojďme k pochopení toho, jak se vytváří pozadí. A první věc, kterou je třeba poznamenat, je rozdíl mezi barva pozadí A obrázek na pozadí. Na začátku to jde barva pozadí, který vyplní celý dostupný prostor stránky nebo jejího prvku. Navrchu je překryto opakování obrázek na pozadí. Vizuálně to lze znázornit takto:

Pozadí dokumentu HTML a jeho prvků

Druhá věc, kterou potřebujete vědět, je rozdíl mezi tělo dokumentu A prvek dokumentu. Tělo dokumentu je v HTML kódu webové stránky označen tagem BODY, který zahrnuje veškerý obsah webové stránky. Je zřejmé, že pozadí těla dokumentu nemůže být průhledné. Pokud není zadáno pozadí těla dokumentu, použije se výchozí hodnota zadaná v nastavení prohlížeče.

Prvky stránky jsou uvnitř štítku BODY. Je pozoruhodné, že není možné nastavit barvu a/nebo obrázek pozadí pomocí HTML pro všechny prvky dokumentu. Například obrázek na pozadí lze zadat pouze pro tabulky. Ve výchozím nastavení mají obvykle průhledné pozadí.

Atribut bgcolor pro vytvoření barvy pozadí

Zeptat se barva pozadí dokument nebo jeho prvky používají atribut bgcolor, například:





V tomto případě nastavujeme barvu pozadí pro stránku jako celek. A zde je příklad, jak nastavit barvu pozadí pro tabulku v tagu TABLE:





Text s pozadím

Je pozoruhodné, že barvu pozadí v tabulce lze zadat jak pro řádky v tagu TR, tak pro jejich buňky v tagu TD.

Jak zjistit kód barvy?

Pravděpodobně jste si již všimli, že barva v HTML je nastavena na speciální kód, například: #ec008c . Pro zjištění kódu barvy, kterou potřebujete, můžete použít některý z grafických editorů. Například ve Photoshopu můžete použít " Nástroj kapátko» (Pipetujte) pro získání barvy z bodu na obrázku. Poté musíte kliknout na výslednou barvu na panelu nástrojů a v okně, které se otevře „ Výběr barvy» (Výběr barvy) zkopírujte kód barvy.

Vezměte prosím na vědomí, že tento kód nebude mít na začátku znak libry (#). Tento znak bude nutné přidat ručně.

Můžete také využít řadu online služeb, například:

  • atd.

Jejich princip fungování je ještě jednodušší - klikněte na požadovanou barvu a získejte její kód.

Atribut pozadí pro vytvoření obrázku na pozadí

Stejné jako v případě barvy pozadí a v případě obrázek na pozadí Musíte použít speciální atribut, konkrétně background , například:





V tomto případě nastavujeme obrázek na pozadí pro stránku jako celek. Je pozoruhodné, že kvůli omezení velikosti obrázku se bude opakovat, například:

Jak vidíte, při opakování je přechod mezi obrázky patrný. Proto se často používají speciální obrázky, kde je tento bod zohledněn.

A zde je příklad, jak nastavit obrázek na pozadí pro tabulku v tagu TABLE:





Text s pozadím

Je pozoruhodné, že obrázek na pozadí lze nastavit pouze pro tabulku jako celek a/nebo její jednotlivou buňku. To nebude fungovat pro řetězec.

Absolutní a relativní cesta k obrázku na pozadí

Stojí za to věnovat zvláštní pozornost adresa obrázku na pozadí. V tomto případě se používá relativní cesta k obrázku, tzn. Adresa je určena relativně k umístění souboru obrázku pro soubor webové stránky. Tuto možnost nelze nazvat zvláště úspěšnou. Nejlepší je použít absolutní cestu k obrázku, tzn. jeho úplnou URL, Například:





V tomto případě nebudete mít žádné související problémy. Můžete si o tom přečíst více.

Pojďme si to shrnout

Použití atributů bgcolor a background je zastaralé, takže pro platnost HTML kódu budete muset použít přechodný DOCTYPE . Pro nastavení barvy pozadí v HTML používá speciální kódy, které zjistíte v grafickém editoru nebo pomocí speciálních online služeb. Obrázek pozadí je duplikován v oblasti, která je mu přidělena a leží nad barvou pozadí. Chcete-li zadat obrázek na pozadí, je lepší použít jeho úplnou adresu URL. To je vše, co mám. děkuji za pozornost. Hodně štěstí!

ve 22:37 Upravit zprávu

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.


Upozorňujeme, že pro uživatele s vyšším rozlišením obrazovky bude váš obrázek duplikován dolů a doprava. Nebude to vypadat dobře, pokud obrázek nebude monochromatický. Pro opravu tohoto parametru existují speciální příkazy.

  • 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.

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 to udělali 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 už 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ě radím, abyste vždy psali ve zkrácené formě, 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í o velikosti řekněme 1280 x 200 a nedáte to velikost pozadí, pak obrazovky s větší šířkou Objeví se prázdné místo, obrázek nevyplní celou šířku.

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.

27. 12. 2014 55,8 tis

Každá místnost bude vypadat mnohem lépe, pokud bude její podlaha pokryta drahým perským kobercem. Proč je tedy váš web horší? Možná je čas „pokrýt“ podlahu drahým, elegantním ručně vyrobeným kobercem. Pojďme se blíže podívat na to, jak vytvořit pozadí pro web:

Pozadí pro web

Stává se, že starý design webových stránek se stal nudným. A chci něco nového a chutného. A nový design bude stejný, pokud si ho vyrobíte sami.

Ale úplně změnit celý design zdroje svépomocí je nevděčný úkol. A ne každý má na tento úkol správně vycvičené ruce. Nejjednodušší způsob, jak obnovit starou šablonu, je změnit barvu pozadí zdroje nebo jeho obrázek na pozadí.

Existuje několik způsobů, jak změnit pozadí na webu. K tomu se využívají možnosti CSS nebo html. Ale mnoho vlastností pro práci s pozadím má v těchto webových technologiích stejný název a způsob aplikace.

Základy práce s pozadím v html

Jako pozadí lze použít několik prvků:

  • Barva;
  • Obrázek na pozadí;
  • Obrázek textury.

Podívejme se na použití každého z nich podrobněji.

Chcete-li nastavit barvu pozadí webu, použijte vlastnost background-color atributu style. To znamená, že chcete-li nastavit hlavní barvu webové stránky, musíte ji napsat do značky . Například:

Pozadí webu #55D52B




Kromě hexadecimálního barevného kódu je podporována hodnota ve formátu klíčového slova nebo RGB. Příklady:

Pozadí webu rgb (23,113,44)



Pozadí webové stránky zelené




Nastavení barvy pozadí pomocí klíčových slov má ve srovnání s ostatními dvěma metodami řadu omezení.

HTML podporuje pouze 16 klíčových slov pro nastavení barev. Zde je několik z nich: bílá, červená, modrá, černá, žlutá a další.

Pro nastavení pozadí pro html web je proto lepší použít hexadecimální nebo RGB formát.

Kromě výběru barev jsou k dispozici další možnosti přizpůsobení. Pokud je vlastnost background-color nastavena na transparentní , bude pozadí stránky průhledné. Tato hodnota je této vlastnosti přiřazena ve výchozím nastavení.

Nyní se podíváme na možnosti hypertextového jazyka pro nastavení obrázku na pozadí webu. To lze provést pomocí vlastnosti background-image.




Jak můžete vidět z kódu, obrázek je propojen přes cestu url uvedenou v závorkách. Ale ne všechny obrázky jsou tak velké, aby jejich velikost zaplnila celou plochu obrazovky. Podívejme se, jak se zobrazí menší obrázek.

Předpokládejme, že vyvíjíme webovou stránku o poezii a jako pozadí potřebujeme použít obrázek Pegase. Okřídlený kůň zosobní svobodu básníkova tvůrčího myšlení!


Potřebujeme, aby se obrázek jednou zobrazil uprostřed obrazovky. Ale bohužel prohlížeč nerozumí našim vznešeným touhám. A zobrazuje menší obrázek na pozadí webu tolikrát, kolikrát se na plochu obrazovky vejde:

Snad čtyři usměvaví koně s křídly budou pro básníky přílišnou inspirací. Proto zakazujeme klonování našeho Pegase. Děláme to pomocí vlastnosti background-repeat. Možné hodnoty:

  • repeat-x – opakování obrázku na pozadí vodorovně;
  • repeat-y – svisle;
  • opakovat – na obou osách;
  • no-repeat – opakování je zakázáno.

Z uvedených možností nás zajímá ta poslední. Před změnou pozadí webu jej používáme v našem kódu:




Ale samozřejmě by bylo lepší, kdyby se náš leták nacházel uprostřed obrazovky. Vlastnost background-position je přesně určena pro umístění obrázku na pozadí na stránce. Souřadnice polohy můžete nastavit několika způsoby:
  • Klíčové slovo ( nahoře, dole, uprostřed, vlevo, vpravo);
  • Procento – počítání začíná od levého horního rohu;
  • V jednotkách měření (pixely).

Použijme nejjednodušší možnost centrování:



Stává se, že při rolování potřebujete opravit polohu obrázku. Proto před vytvořením obrázku jako pozadí webu použijte speciální vlastnost background-attachment . Hodnoty, které přijímá, jsou:


  • svitek;

  • opraveno.

Potřebujeme poslední hodnotu. Nyní bude náš ukázkový kód vypadat takto:



Webové stránky textury pozadí

V prvním příkladu jsme jako pozadí použili velkou a krásnou pouštní krajinu. Ale za takovou krásu musíte zaplatit v plné výši. Hmotnost obrazu vyrobeného ve vysoké kvalitě může dosáhnout několika megabajtů.

Tento objem nijak neovlivňuje rychlost načítání stránky prohlížeče s vysokorychlostním připojením k internetu. Ale co mobilní internet, při jeho používání zabere načítání několika „metrů“ spoustu času?

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 značky, 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!




Nahoru