Pokud jsi návrh webové stránky, mohlo by vás zajímat, jak vytvořit pevný obrázek na pozadí nebo vodoznak na webové stránce. Jedná se o běžnou úpravu designu, která je již nějakou dobu populární online. Je to užitečný efekt, který můžete mít ve svém triku s webovým designem.
Pokud jste to dříve neudělali nebo jste to dříve bez štěstí vyzkoušeli, může se tento proces zdát zastrašující, ale ve skutečnosti to není vůbec obtížné. S tímto krátkým tutoriálem získáte informace, které potřebujete k osvojení techniky během několika minut pomocí CSS.
Začínáme
Obrázky na pozadí nebo vodoznaky (což jsou opravdu jen velmi světlé obrázky na pozadí) mají historii v tištěném designu. Dokumenty již dlouho obsahují vodoznaky, aby se zabránilo jejich kopírování. Mnoho letáků a brožur navíc používá velké obrázky na pozadí jako součást designu tištěného kusu. Webový design má již dlouho vypůjčené styly z tisku a obrázky na pozadí jsou jedním z těchto vypůjčených stylů.
Tyto velké obrázky na pozadí lze snadno vytvořit pomocí následujících tří Styl CSS vlastnosti:
- obrázek na pozadí
- opakování pozadí
- příloha na pozadí
- velikost pozadí
Obrázek na pozadí
Obrázek pozadí použijete k definování obrázku, který bude použit jako vodoznak. Tento styl jednoduše používá cestu k souboru k načtení obrázku, který máte na svém webu, pravděpodobně do adresáře s názvem snímky.
background-image: url (/images/page-background.jpg);
Je důležité, aby samotný obrázek byl světlejší nebo průhlednější než normální obrázek. Tím se vytvoří, že “vodoznak"vzhled, ve kterém poloprůhledný obrázek leží za textem, grafikou a dalšími hlavními prvky webové stránky. Bez tohoto kroku bude obrázek na pozadí konkurovat informacím na vaší stránce a znesnadní čtení.
Obrázek na pozadí můžete upravit v libovolném editačním programu, například Adobe Photoshop.
Opakování pozadí
Dále přichází vlastnost background-repeat. Pokud chcete, aby byl váš obrázek velkou grafikou ve stylu vodoznaku, použijte tuto vlastnost k tomu, aby se tento obrázek zobrazoval pouze jednou.
background-repeat: no-repeat;
Bez neopakovat vlastnost, výchozí je, že se obrázek bude na stránce opakovat znovu a znovu. To je u většiny moderních návrhů webových stránek nežádoucí, proto by tento styl měl být ve vašem CSS považován za zásadní.
Příloha na pozadí
Připojení na pozadí je vlastnost, na kterou mnoho webových designérů zapomíná. Jeho použití udržuje váš obrázek pozadí na místě, když používáte pevný vlastnictví. Právě to promění tento obrázek na vodoznak, který je na stránce opraven.
Výchozí hodnota pro tuto vlastnost je svitek. Pokud nezadáte hodnotu přílohy na pozadí, pozadí se bude posouvat spolu se zbytkem stránky.
připojení na pozadí: opraveno;
Velikost pozadí
Velikost pozadí je novější vlastnost CSS. Umožňuje vám nastavit velikost pozadí na základě výřezu, ve kterém je zobrazen. To je velmi užitečné pro responzivní weby které se zobrazí v různých velikostech na různých zařízeních.
velikost pozadí: obal;
Pro tuto vlastnost můžete použít dvě užitečné hodnoty:
- Pokrýt - Změní měřítko pozadí tak, aby se zobrazila buď celá šířka, nebo celá výška. To znamená, že některé části obrazu se nemusí na obrazovce objevit, ale že bude pokryta celá oblast.
- Obsahovat - Změní měřítko obrázku tak, aby se ve stylované oblasti zobrazila celá šířka i výška. Obrázek není oříznutý, ale nevýhodou je, že část oblasti nemusí být obrázkem zakryta.
Přidání CSS na vaši stránku
Jakmile pochopíte výše uvedené vlastnosti a jejich hodnoty, můžete tyto styly přidat na svůj web.
Pokud vytváříte jednostránkový web, přidejte do HLAVY své webové stránky následující. Přidejte jej do stylů CSS externí šablony stylů, pokud vytváříte vícestránkový web a chcete využít výhod externího listu.
Změňte adresu URL obrázku na pozadí tak, aby odpovídal konkrétnímu názvu souboru a cestě k souboru, která je relevantní pro váš web. Proveďte jakékoli další vhodné změny, aby vyhovovaly i vašemu designu, a budete mít vodoznak.
Můžete také určit polohu
Pokud chcete umístit vodoznak na konkrétní místo na své webové stránce, můžete to udělat také. Můžete například chtít vodoznak uprostřed stránky nebo třeba v dolním rohu, na rozdíl od horního rohu, což je výchozí nastavení.
Chcete-li to provést, přidejte do svého stylu vlastnost background-position. Tím umístíte obrázek na přesné místo, kde chcete, aby se objevil. K dosažení tohoto efektu umístění můžete použít hodnoty pixelů, procenta nebo zarovnání.
pozice na pozadí: střed;