Hnízdiště: jak udělat obrázek na pozadí html

Mnoho začínajících webové designéry, jen aby se ponořit do podstaty tvorby míst, se často ptají, jak se to dělá obraz html pozadí. A pokud některé z nich mohou vypořádat s tímto problémem, je to stále problém při natahování přes celou šířku obrazu na monitoru. Zároveň bych chtěl vidět na webu se zobrazují shodně na všech prohlížečích, takže by měl splňovat požadavky cross-browser. Můžete nastavit pozadí dvěma způsoby: pomocí HTML tagů a CSS stylů. Každý sám vybere tu nejlepší možnost. Samozřejmě, CSS styl je mnohem pohodlnější, protože jeho kód je uložen v samostatném souboru a nezabírá další reproduktory značky hlavním závodě, ale nejdříve uvažujme jednoduchou metodu pro instalaci obrázek na pozadí webu.

Základní HTML tagy pro vytvoření pozadí

Takže jdeme na otázku, jak se dělá obrázek na pozadí ve formátu HTML na obrazovce. Za účelem sluší stránky, musíte pochopit jednu poměrně důležitý detail: to je dost, jen aby s přechodem pozadí nebo malovat to plné barvy, ale pokud potřebujete vložit obrázek na pozadí, nebude natáhnout přes celou šířku monitoru. Obraz byl původně potřeba vyzvednout nebo si vytvořit svůj vlastní design s tímto rozšířením, ve kterém se zobrazí stránka webu. Pouze tehdy, když obrázek na pozadí je připraven, přetáhněte ji do složky s názvem «Obrázky». V něm budeme ukládat všechny použité obrázky, animace a další grafické soubory. Tato složka musí být umístěn v kořenovém adresáři se všemi soubory ve formátu HTML. Nyní můžete přejít i na kód. Existuje několik možností pro psaní kódu, kterým bude pozadí změnit obraz.

1. Napsat atribut tag.
2. Prostřednictvím CSS stylu v kódu HTML.
3. Napsat CSS stylů v samostatném souboru.

Stejně jako v HTML, aby obrázek na pozadí, můžete rozhodnout, ale já bych chtěl říci pár slov o tom, jak by bylo nejoptimálnější. První metoda je tím, že píše pomocí atributu značky již dávno zastaralá. Druhá varianta se používá velmi zřídka, protože se ukázalo, že mnoho ze stejného kódu. Třetí možností je nejběžnější a efektivní. Zde jsou příklady HTML tagy:

1. První metoda záznamu pomocí atributu značky (tělo) v index.htm souboru. Skladuje se v této formě: (tělo pozadí = "folder_name / Nazvanie_kartinki.rasshirenie") (/ body). To znamená, že máme-li snímek s názvem «obrázek» a rozšíření JPG a složky jsme s názvem «Images», pak položka HTML kód bude vypadat takto: (body background = „Images / picture.jpg“) ... (/ body) ,
2. Druhá metoda spočívá v nahrávání CSS styl, ale je to napsáno ve stejném souboru s názvem index.htm. (Body style = "background: url ( '../ Images / picture.jpg')").
3. Třetí metoda záznamu se vyrábí ve dvou souborech. Dokument s názvem index.htm tagu (hlava) je napsána tak řádek: (hlava) (link rel = "stylesheet" type = "text / css" href = „http: // site / article / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu „) (/ hlava). Soubor s názvem style.css styl už psát: body {background: url (Images / picture.jpg ‚)}.

Stejně jako v HTML, aby obrázek na pozadí, chápeme. Nyní je třeba zjistit, jak roztáhnout obraz přes celou šířku přes celou obrazovku.

Způsoby, jak protáhnout obrázek na pozadí displeje na šířku okna

Zastupujeme naše obrazovky ve formě procenta. Ukazuje se, že celá šířka a délka obrazovky bude 100% x 100%. Musíme rozprostřít obraz na této šířce. Přidat do obrazového souboru záznamu style.css linky, která bude trvat obraz po celé šířce a délce monitoru. Jak je psáno v CSS stylu? Je to jednoduché!

tělo

{

background: url (Images / picture.jpg ‚)

pozadí-size: 100%; / * Tento příspěvek je vhodný pro většinu moderních prohlížečů * /

}

Tak jsme zjistili, jak vytvořit obraz pozadí v HTML na obrazovce. K dispozici je také způsob záznamu v souboru index.htm. I když tímto způsobem a zastaralé, ale pro začátečníky je nutné poznat a pochopit. Tag (hlava) (styl) div {background-size: kryt; } (/ Style) (/ hlava), to znamená, že záznam přidělit zvláštní jednotku pro pozadí, které se položí přes celou šířku okna. Zvažovali jsme dva způsoby, jak se dělá HTML stránky pozadí obrazu, takže obraz je roztažen na celou šířku displeje v některém z moderních prohlížečů.

Jak vytvořit pevné zázemí

Pokud se rozhodnete použít obrázek jako pozadí budoucího webového zdroje, pak stačí vědět, jak ji pevně, takže to není natažené v délce a ne kazí estetický vzhled. Jednoduše pomocí HTML kódu zaregistrovat malý přírůstek. Musíte soubor style.css přidat větu po pozadí: url (snímků / picture.jpg ‚) pevná; nebo místo přidán po středníkem samostatný řádek - funkce: pevná. Tak bude vaše tapeta být stanovena. Při rolování obsahu na webu, uvidíte, že text linky jsou pohyblivé, ale pozadí zůstává na svém místě. Takže jste se naučili, jak se to dělá html obrázek na pozadí, v několika způsoby.

Práce s tabulkami v HTML

Mnoho nezkušených webové vývojáře, tváří v tvář s tabulkami a bloků, často nechápou, jak se dělá html obraz pozadí tabulky. Stejně jako všechny týmy HTML stylů a CSS, web programovací jazyk je poměrně jednoduchý. A řešením tohoto problému je napsat pár řádků kódu. už byste měli vědět, že psát tabulku řádků a sloupců, v uvedeném pořadí, jak je vyznačeno značkami (TR) a (td). Chcete-li na pozadí tabulky ve formě obrázku, je nutné přidat do tagu (tabulky), (TR) nebo (TD) jednoduché fráze s odkazem na referenčním snímku: pozadí = obrazů URL. Pro názornost uvádíme několik příkladů.

Tabulka s obrázkem místo na pozadí: příklady HTML

Nakreslit 2x3 tabulku a učinit z něj obrázek na pozadí uloženy ve složce "Obrázky": (viz tabulka background = "images / picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabulka). Takže naše tabulka bude vypracován na pozadí obrazu.

Nyní čerpat stejné velikosti deska 2x3, ale vložit obrázek ve sloupcích označených čísly 1, 4, 5 a 6. (viz tabulka) (TR) (td background = "Images / picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td pozadí = "Obrázky / picture.jpg") 4 (/ td) (td pozadí = "Obrázky / picture.jpg") 5 ( / td) (td background = "Obrázky / picture.jpg") 6 (/ td) (/ tr) (/ tabulka). Po shlédnutí můžeme vidět, že na pozadí se zobrazí pouze v těch buňkách, ve kterých jsme zaznamenali, a ne celou tabulku.

site cross-browser kompatibilitu

Existuje taková věc jako webová kompatibilita zdroj cross-prohlížeče. To znamená, že váš web je stejně dobře zobrazit v různých typech a verzích prohlížečů. Mělo by to být HTML kód a CSS stylů přizpůsobit potřebné prohlížeče. Kromě toho, v moderní době chytrých telefonů, mnoho webových vývojářů se snaží vytvářet weby a uzpůsobené pro mobilní verzi a počítačovou vzhled.