Jak nastavit pozadí stránky. Barva textu a barva pozadí v CSS

Lekce 7. Barva textu a pozadí v HTML.

Datum: 2008-12-05

Jak nastavit pozadí a barvu textu na webové stránce?

Ve výchozím nastavení je barva textu a obecně jakéhokoli písma na webových stránkách vždy Černá (#000000 ). Vždy ale můžeme nastavit naprosto jakoukoli barvu, která se nám líbí a vypadá decentně nebo vhodnější pro design konkrétního webu.

Nastavte barvu textu

V HTML lze barvu textu, písma, pozadí a dalších prvků nastavit dvěma způsoby:

1. Metoda 1. V párových značkách atribut je zapsán s názvem požadované barvy. Název barvy je uveden v angličtině. Například barvu nadpisu na naší webové stránce lze nastavit takto:

Komentáře k tomuto článku (lekci):

Andrey! Jaké úžasné stránky máte! Pravidelně ji používám již druhý týden: studuji vaše lekce a videonávody; Čtu vaši literaturu a stahuji programy; Dělám své první kroky v programování webu! A hlavně to umím!!! A to vůbec nejsem fyzik, ale textař! A každý, kdo navštíví mé literární stránky, se o tom může přesvědčit: "BÁSNĚ OLEG GUZE" Moje údaje: e-mail: [e-mail chráněný] webové stránky: http://sites.google.com/site/stihiolegguz/

pečlivě zkontrolujte kód

Zkoušel jsem změnit barvu pozadí a nefunguje to! Jak změnit barvu pozadí?

Každý pokoj bude vypadat mnohem lépe s drahým perským kobercem na podlaze. Co je tedy na vašem webu špatného? Možná je čas „pokrýt“ podlahu drahým elegantním ručně vyrobeným kobercem. Podívejme se blíže na to, jak vytvořit pozadí pro web:

Pozadí pro web

Stává se, že starý design stránek je již nudný. A chci něco nového a chutného. A nový design bude takový, pokud si ho uvaříte sami.

Ale změnit celý design zdroje svépomocí je nevděčná věc. A ne každý má pro tento byznys správně „nabroušené“ ruce. Proto je nejjednodušší obnovit starou šablonu změnou barvy pozadí zdroje nebo obrázku 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í na pozadí má stejný název a použití v těchto webových technologiích.

Základy HTML pozadí

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 zaregistrovat do značky . Například:

Pozadí webové stránky #55D52B

Kromě hexadecimálního barevného kódu je podporováno klíčové slovo nebo hodnota 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í.

V html je podporováno pouze 16 barevných klíčových slov. Zde je několik z nich: bílá, červená, modrá, černá, žlutá a další.

Proto, aby bylo možné nastavit pozadí pro html stránky, je lepší použít hex nebo RGB.

Kromě výběru barev jsou k dispozici další možnosti přizpůsobení. Nastavením vlastnosti background-color 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 vázán přes cestu url uvedenou v závorkách. Ale ne všechny obrázky jsou tak velké, aby svou velikostí zaplnily celou plochu obrazovky. Podívejme se, jak se zobrazí menší obrázek.

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

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

Zřejmě čtyři usměvaví koně s křídly budou pro básníky pro inspiraci příliš. 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 těchto 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ě je lepší, když je náš leták umístěn uprostřed obrazovky. Vlastnost background-position slouží pouze k 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 - odpočítávání začíná od levého horního rohu;
• V jednotkách měření (pixely).

Pro centrování použijeme nejjednodušší možnost:

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

• svitek;


• pevný.

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 vysoce kvalitního obrazu může dosáhnout několika megabajtů.

Takový objem nemá vliv na rychlost načítání stránky prohlížečem s vysokorychlostním připojením k internetu. Jak je to ale s mobilním internetem, při jehož používání bude stahování pár „metrů“ trvat dlouho?

Všechny tyto problémy jsou vyřešeny pomocí texturovaného pozadí. Jako vzor textury používá malý obrázek. I když se to opakuje mnohokrát, výkres se načte pouze jednou.

Chcete-li vytvořit tmavé pozadí webu, přejděte do Photoshopu, vytvořte obrázek ve formě pruhu o délce 1200 pixelů a šířce 15 pixelů. Poté aplikujeme jednoduchý černobílý přechod a výslednou texturu připojíme ke stránce webu:

Nástroje CSS

Všechny výše popsané vlastnosti platí také pro kaskádové styly. Pojďme vytvořit pozadí css webu přepsáním jednoho z našich předchozích příkladů.

Téměř každý oblíbený web má pěkný vzhled. V designu webových stránek je důležitou součástí pozadí, kterému se také říká pozadí, které si každý z nás může vytvořit nebo změnit. V tomto článku vám řeknu, jak umístit pozadí na web.

Vytvoření nového pozadí pro webové stránky

K dokončení úkolu můžete použít jednu ze 4 metod:

• 1. Pozadí s jednou barvou
• 2. Pozadí s texturou
• 3. Pozadí s přechodem
• 4. Pozadí s velkým obrázkem

Vytvořte pozadí s jednou barvou

Chcete-li vytvořit nebo změnit pozadí webu, které se skládá z jedné barvy, musíte jít do souboru styl.css, ve kterém najdete hodnotu - tělo (je zodpovědné za hlavní tělo webu). Nyní musíte napsat funkci background-color, pokud tam nebyla, a zadat kód barvy. V případě, že potřebujete pro web vytvořit bílé pozadí, budete muset napsat následující kód:

barva pozadí: #83C5E9 ; (modré pozadí, jako v příkladu)

Kompletní seznam barev najdete na webu - (STM). Chcete-li změnit barvu, stačí změnit hodnotu za dvojtečkou a užívat si práci.

Vytvoření pozadí s texturou

Tato metoda je v poslední době obzvláště populární, protože umožňuje vytvořit krásné pozadí pro stránky. Textury mohou být jednoduché, ale velmi krásné, a proto se často používají. Aby bylo možné připojit jakoukoli texturu, musí být nahrána do složky obrázků na hostingu, kde je nainstalována vaše stránka. Poté byste měli napsat následující kód:

barva pozadí: #537759;

background-image: url(images/pattern.png);

V tomto kódu je známý parametr pro zachování barvy (je zelená) a prvek, který má na starosti propojení zelené textury.

Vytvoření pozadí s přechodem

Jakýkoli obrázek, který je připojen pomocí funkcí css, lze opakovat horizontálně i vertikálně (podél os X A Y). Tato funkce nám umožňuje vytvořit libovolné jednoduché pozadí webu vlastníma rukama. K tomu je potřeba vytvořit 1 megapixel široký gradient (viz obrázek níže), uložit jej jako obrázek a nahrát na hosting. Poté můžete napsat potřebný kód, konkrétně:

barva pozadí: #83C5E9;

background-image: url(images/gradient.jpg);

background-repeat: repeat-x;

V této sadě je v pořadí podle priority funkce zodpovědná za barvu pozadí, kterou používáme pro zajištění. Poté parametr, který je zodpovědný za připojení gradientu, a nakonec funkce, která je zodpovědná za opakování gradientu podél osy X.

Použití velkého obrázku na pozadí webu

Tato metoda je druhá nejoblíbenější, protože umožňuje použít různé obrázky k vytvoření pozadí. K implementaci této metody stačí nahrát velký obrázek do složky obrázků na webu a napsat následující kód:

barva pozadí: #000000;

background-image: url(images/image title.jpg);

background-position: center top;

background-repeat: no-repeat;

Pokud je u prvních dvou parametrů vše jasné, pak je třeba zvýraznit poslední dva. Třetí funkce umožňuje opravit obrázek ve středu webu a poslední parametr blokuje jeho opakování v celé struktuře stránky.

Změna pozadí na webech ucoz

Tyto metody tvorby pozadí pro web lze použít na různých redakčních systémech, ale ne na webech - ucoz. Chcete-li změnit pozadí webu ucoz, musíte přejít na ovládací panel webu, přejděte na "Správa designu" a pak dovnitř "Úprava šablon".

Nyní musíte otevřít Style Sheet (CSS), najít řádek tělo a parametr Pozadí. Poté musíte zkopírovat odkaz, vložit jej do internetového prohlížeče a získáte přístup k obrázku, který byl pozadím.

Chcete-li použít nové pozadí, stačí jej nahrát do Správce souborů. Zároveň se ujistěte, že název nového obrázku pro pozadí je stejný jako před změnou. Uložte svou práci a přejděte na web, kde se zobrazí provedená práce.

Změňte pozadí webu na HTML

Pokud chcete vytvořit pozadí na html webu pomocí obrázku, jednoduše zadejte řádek v kódu:

A pokud chcete vytvořit pozadí webu pomocí barvy, řádek by měl vypadat takto:

Tím náš příběh končí. Nyní víte, jak vytvořit pozadí pro web. Úspěšné projekty!

Od autora: vítám všechny. Barvy pozadí a obrázky ve webovém designu hrají obrovskou roli, protože umožňují atraktivněji navrhnout jakýkoli prvek. Jak udělat pozadí v html, dnes se podíváme.

Dá se při nastavení pozadí vyjít s html?

Hned vám řeknu, že ne. Obecně platí, že html není určeno k navrhování webových stránek. Je to prostě velmi nepohodlné. Existuje například atribut bgcolor, kterým lze nastavit barvu pozadí, ale to je velmi nepohodlné.

Podle toho použijeme kaskádové styly (css). Možností nastavení pozadí je mnohem více. Dnes si rozebereme 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 pravidlo zapisovat. Pokud například potřebujete nastavit pozadí pro celou stránku jako celek, můžete to udělat pomocí selektoru těla, pro všechny bloky pomocí selektoru div. No atd. Pozadí může a mělo by být připojeno k jakýmkoli dalším selektorům: třídám stylů, identifikátorům atd.

Poté, co se rozhodnete pro selektor, musíte napsat název samotné nemovitosti. K nastavení barvy pozadí (jmenovitě plné barvy, nikoli přechodu a ne obrázku) se používá 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. Pro výběr barev můžete použít program, ve kterém vidíte kód barvy. Například photoshop, malování nebo nějaký online nástroj. Podle toho například předepíšu společné 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 ID:

Dejme tomu explicitní rozměry a pozadí:

#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 nazvanou background-image. Je určen právě pro vložení obrázku jako pozadí do html prvku. Uvidíme, co se stane:

Chcete-li zadat obrázek, musíte za dvojtečkou napsat url klíčového slova a poté v závorkách zadat 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, zkontrolujte znovu, zda jste název obrázku napsali správně, zda je správně nastavena cesta a přípona. To jsou nejčastější důvody, proč se pozadí prostě nezobrazuje, protože prohlížeč nemůže obrázek najít.

Ale všimli jste si jedné vlastnosti? 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 spravovat. K tomu použijte vlastnost background-repeat, která má 4 hlavní hodnoty:

Opakovat - výchozí hodnota, obrázek 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. Budu psát takto:

background-repeat: repeat-x;

Nyní opakujte pouze vodorovně. Pokud napíšete ne-opakovat, pak by byl pouze jeden obrázek.

Skvělé, s tím můžeme skončit, jelikož toto jsou základní funkce práce s pozadím, ale ukážu vám ještě 2 další vlastnosti, které vám umožní získat více možností ovládání.

Pomocí opakování kodéři dosáhli bodu vytváření textur na pozadí a přechodů 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 při opakování na jedné nebo dokonce na obou stranách nebyly vidět žádné přechody, takže nakonec bylo získáno jediné celistvé pozadí. Mimochodem, tento přístup se nyní vyplatí použít, pokud chcete na svém webu jako pozadí použít bezešvou texturu. Gradient dnes již lze 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 se na to zeptat různými způsoby. Jednou z možností je jednoduše určit strany, na kterých má být obrázek:

pozadí-pozice: vpravo nahoře;

To znamená, že vše zůstalo stejné vertikálně: obrázek na pozadí je umístěn nahoře, ale vodorovně jsme změnili stranu na pravou, tedy pravou. 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, zapíšeme jej takto:

pozice pozadí: 50 % 50 %;

Jedna důležitá věc, kterou je třeba si pamatovat ohledně umístění, je, že prvním parametrem je vždy horizontální poloha a druhým parametrem je vertikální poloha. Pokud tedy uvidíte hodnotu 80% 20%, pak můžete okamžitě usoudit, že obrázek na pozadí bude silně posunutý doprava, ale dolů moc nepůjde.

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í také nezbytné.

Zkrácený zápis

Souhlaste 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 nastavit cestu k obrázku, opakování a polohu. Opakování a umístění samozřejmě není vždy nutné, ale v každém případě by bylo správnější použít těsnopis vlastnosti. Ta vypadá takto:

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 zadat pouze barvu nebo obrázek.

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

Náš současný obrázek se k dalšímu triku příliš nehodí, takže vezmu jiný. Ve velikosti ať je jako blok nebo větší než on. 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 obrázek je například ještě větší než velikost bloku.

Co lze v takovém případě dělat? Samozřejmě, že nejjednodušší a nejrozumnější možností by bylo jednoduše zmenšit obrázek, ale ne vždy je to možné. Řekněme, že leží na serveru a momentálně není čas a 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 %;

Opět platí, že prvním parametrem je horizontální velikost, druhým je 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 je třeba provést pouze jedno upřesnění - nastavením velikosti v procentech můžete ovlivnit proporce obrázku. Buďte tedy opatrní, pokud nechcete narušit proporce.

Jak asi tušíte, velikost pozadí lze zadat také v pixelech. Existují také dvě hodnotná klíčová slova, která lze také použít:

Obálka – obrázek bude zmenšen tak, aby alespoň jedna jeho strana zcela vyplnila blok.

Obsahovat - 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, takže je ponechávají 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 nenastavíte velikost pozadí pro Pokud se pak objeví obrazovky o šířce větší než prázdné místo, obraz celou šířku nevyplní.

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. Toto je dobrý trik, ale nyní narazíte na problém, že uživatelé s šířkou obrazovky 1920 pixelů mohou vidět suboptimální kvalitu obrazu.

Připomínám, že se roztáhne na maximální šířku. 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 jiných bude jednoduše odříznut pomalu, ale zároveň to s kompetentním výběrem obrázku na pozadí neovlivní vzhled webu.

Celkově vzato, toto je jen 1 příklad toho, jak aplikovat znalosti, které jste získali v tomto článku, na rozvržení v reálném životě.

průsvitné pozadí s 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 pozadí celé stránky na obrázek, 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, v css existuje mnoho formátů pro nastavení barev. 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.

V html se pozadí pro stránky nenastavuje, píše se přes css styly, ale to je jen teoretická formalita. A nyní zjistíme, jak toto pozadí definovat.

Pozadí pro web nebo samostatný blok

Protože k dosažení tohoto cíle potřebujeme soubor css, musíme jej vytvořit a připojit k html. Toto je napsáno v. Poté se můžete pustit do práce. Nejprve se musíte rozhodnout, na jaké pozadí chcete nastavit. Pokud je celá stránka jako celek, můžete to udělat takto:

Tělo (barva pozadí: bílá; )

To znamená, že odkazujeme na značku body, která představuje celou naši stránku. Vlastnost background-color se používá k nastavení barvy pozadí. Ale co když chcete pozadí nastavit na grafiku namísto plné barvy? Pak byste měli napsat takto:

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

Pro přehlednost navrhuji zvážit vše podrobněji s příkladem. K tomu použiji následující obrázek:

Například obrázek na pozadí: url(comp.png) . V tomto příkladu jsme nastavili obrázek na pozadí nazvaný comp (tak jsem to nazval) ve formátu png, který je ve stejné složce jako soubor css.
V html vytvořím libovolný blok s konkrétními velikostmi, abych na něm demonstroval práci vlastností css.

A tady jsou na to styly:

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

Zde je to, co máme:

proč tomu tak je? Faktem je, že ve výchozím nastavení prohlížeč opakuje obrázek tolikrát, aby blok zcela zaplnil. Někdy je to nutné, například při použití bezešvých ozdob, ale v našem případě by měl být jeden obrázek. Naštěstí se to dá velmi snadno zvládnout.

opakující se pozadí

Pokud máte jako pozadí obrázek, bude se to ve výchozím nastavení opakovat vodorovně i svisle, aby vyplnil celý prostor stránky. K odstranění tohoto se používá vlastnost background-repeat a její hodnota je no-repeat (neopakovat). Existují také tyto hodnoty:

• Repeat-x - opakujte pouze vodorovně
• Repeat-y – pouze vertikální

K vlastnostem našeho grafického pozadí přidáme:

background-repeat: no-repeat;

Pozice

Vlastnost background-position určuje, kam bude obrázek umístěn. Zde se nastavují dvě hodnoty - horizontálně a vertikálně. Příklady: background-position: right bottom – pozice v pravém dolním rohu, top-left – v dolním horním (ve výchozím nastavení atd.), 250px 500px - posun od levého horního rohu doprava o 250 pixelů a dolů o 500

Podívejme se lépe na příklady:

pozadí: vpravo nahoře;

Obrázek se přesune k pravému hornímu okraji. Kvádru jsem dal i žluté pozadí, aby byly vidět jeho okraje.

pozice pozadí: 50 % 50 %;

Obraz se objevil přesně uprostřed v jeho bloku. Ano, ano, i to je možné díky procentuálnímu záznamu pozice.

pozice pozadí: 70 % 20 %;

Pozadí je posunuto o 70 % horizontálně a 20 % vertikálně.

Je také povoleno zadat zápornou hodnotu pozice v pixelech. To lze provést například tehdy, když používáte velký obrázek spritu a potřebujete zablokovat požadovanou část tohoto spritu.

Připnutí pozadí

Také se mi moc líbí jedna vlastnost s názvem background-attachment . Má pouze dvě hodnoty a první je výchozí (rolování). To znamená, že při rolování stránky se bude rolovat i pozadí, a pokud použijete obrázek bez opakování, tak nakonec skončí a bude pokračovat jen plná barva.

Aby se tomu zabránilo, je zapsáno pozadí-attachment: fixed a nyní je naše pozadí bezpečně upevněno na svém místě. Dá se to přirovnat k tomu, jak definovat pevnou pozici pro blok a ten při rolování ze stránky nezmizí.

Zkrácený záznam všech těchto dobrot

Analyzovali jsme mnoho vlastností, které vám umožňují vytvořit pozadí, ale pokud je všechny použijete, dostanete těžkopádný zápis. Existuje velmi elegantní řešení. Vlastnost pozadí umožňuje zapsat potřebná nastavení oddělená mezerou v tomto pořadí:
Pozadí: pozice připnutí opakování barevného obrázku;
A nyní lze vše napsat takto:

Pozadí: žlutá url(comp.png) bez opakování 20 % 100px;

Pokud nějakou vlastnost není potřeba definovat, pak se jednoduše vynechá (v našem případě jsme nepsali background-attachment).

Spousta pozadí

Ale co když potřebujete více obrázků na pozadí? Stává se, co se dá dělat. Dnes tuto funkci podporuje css. Zkusme to taky. Vezměte tuto ikonu

Pojmenoval jsem to laptop.

A zde je kód pro vložení multifonu:

Pozadí: url(comp.png) bez opakování 20% 100px, url(laptop.png) bez opakování 50% 50%; barva pozadí: žlutá

Jak vidíte, stačí za první obrázek dát čárku a nastavit nastavení pro druhý. Plná barva je v tomto případě lepší nastavit samostatně.

Stejně tak můžete nahrát více obrázků, kolik chcete, ale nepřehánějte to - příliš mnoho grafiky není příliš dobré.

Zde bych chtěl tento článek ukončit. S pozadím můžete dělat mnoho dalších zajímavých věcí, pokusím se o nich v budoucnu napsat (a něco jsem už napsal - například). Hodně štěstí s touto nemovitostí.