Ak si návrh webovej stránky, mohlo by vás zaujímať, ako vytvoriť pevný obrázok na pozadí alebo vodoznak na webovej stránke. Toto je bežné dizajnérske ošetrenie, ktoré je populárne online už pomerne dlho. Je to šikovný efekt, ktorý môžete mať v taške trikov s webovým dizajnom.
Ak ste to predtým neurobili alebo ste to už predtým vyskúšali bez šťastia, proces sa môže zdať zastrašujúci, ale nie je to vôbec veľmi náročné. Pomocou tohto krátkeho tutoriálu získate informácie potrebné na osvojenie techniky v priebehu niekoľkých minút pomocou CSS.
Začíname
Obrázky na pozadí alebo vodoznaky (čo sú skutočne len veľmi ľahké obrázky na pozadí) majú históriu tlačeného dizajnu. Dokumenty už dlho obsahujú vodoznaky, aby sa zabránilo ich kopírovaniu. Mnoho letákov a brožúr navyše využíva veľké obrázky na pozadí ako súčasť dizajnu tlačeného kusu. Webdizajn si dlho vypožičal štýly z tlače a obrázky na pozadí sú jedným z týchto vypožičaných štýlov.
Tieto veľké obrázky na pozadí sa dajú ľahko vytvoriť pomocou nasledujúcich troch Štýl CSS vlastnosti:
- obrázok na pozadí
- opakovanie pozadia
- príloha na pozadí
- veľkosť pozadia
Obrázok na pozadí
Obrázok na pozadí použijete na definovanie obrázka, ktorý sa použije ako vodoznak. Tento štýl jednoducho používa cestu k súboru na načítanie obrázka, ktorý máte na svojom webe, pravdepodobne do adresára s názvom snímky.
background-image: url (/images/page-background.jpg);
Je dôležité, aby bol samotný obrázok svetlejší alebo priehľadnejší ako normálny obraz. Toto vytvorí toto “vodoznak"vzhľad, v ktorom polopriehľadný obrázok leží za textom, grafikou a ďalšími hlavnými prvkami webovej stránky. Bez tohto kroku bude obrázok na pozadí konkurovať informáciám na vašej stránke a bude ťažko čitateľný.
Obrázok na pozadí môžete upraviť v ľubovoľnom editovacom programe, ako je napr Adobe Photoshop.
Opakovanie pozadia
Ďalej nasleduje vlastnosť background-repeat. Ak chcete, aby bol váš obrázok veľkým obrázkom v štýle vodoznaku, pomocou tejto vlastnosti by ste ho mohli zobraziť iba raz.
background-repeat: no-repeat;
Bez neopakovať vlastnosti, predvolené je, že sa obrázok bude na stránke opakovať znova a znova. To je nežiaduce pri väčšine moderných návrhov webových stránok, preto by sa tento štýl mal vo vašom CSS považovať za nevyhnutný.
Pozadie - príloha
Priloženie na pozadí je vlastnosť, na ktorú mnoho webových dizajnérov zabúda. Jeho použitím sa váš obrázok pozadia zafixuje na danom mieste, keď použijete opravený nehnuteľnosť. To je to, čo premení tento obrázok na vodoznak, ktorý je pripevnený na stránke.
Predvolená hodnota pre túto vlastnosť je zvitok. Ak nezadáte hodnotu prílohy na pozadí, pozadie sa bude posúvať spolu so zvyškom stránky.
príloha na pozadí: opravená;
Veľkosť pozadia
Veľkosť pozadia je novšia vlastnosť CSS. Umožňuje vám nastaviť veľkosť pozadia na základe výrezu, v ktorom sa zobrazuje. To je veľmi užitočné pre responzívne weby ktoré sa budú zobrazovať v rôznych veľkostiach na rôznych zariadeniach.
veľkosť pozadia: obal;
Dve užitočné hodnoty, ktoré môžete použiť pre toto vlastníctvo, zahŕňajú:
- Obal - Zmenší mierku pozadia tak, aby sa zobrazila buď celá šírka, alebo celá výška. To znamená, že niektoré časti obrazu sa nemusia zobraziť na obrazovke, ale že bude pokrytá celá oblasť.
- Obsahujú - Zmenší mierku obrázka tak, aby sa v oblasti, v ktorej sa upravuje štýl, zobrazila celá šírka aj výška. Obrázok nie je orezaný, ale nevýhodou je, že niektoré oblasti nemusí byť obrázkom zakryté.
Pridanie CSS na vašu stránku
Keď pochopíte vyššie uvedené vlastnosti a ich hodnoty, môžete tieto štýly pridať na svoje webové stránky.
Ak vytvárate jednostránkový web, do HEAD svojej webovej stránky pridajte toto. Pridajte ho do štýlov CSS externej šablóny štýlov, ak vytvárate viacstránkový web a chcete využiť výhody externej šablóny.
Zmeňte adresu URL svojho obrázka na pozadí tak, aby zodpovedala konkrétnemu názvu súboru a ceste k súboru, ktoré sú relevantné pre váš web. Vykonajte ďalšie vhodné zmeny, aby sa zmestili aj do vášho dizajnu, a budete mať vodoznak.
Môžete tiež určiť pozíciu
Ak chcete umiestniť vodoznak na konkrétne miesto na svojej webovej stránke, môžete to urobiť tiež. Môžete napríklad chcieť vodoznak v strede stránky alebo v dolnom rohu, na rozdiel od horného rohu, ktorý je predvolený.
Ak to chcete urobiť, pridajte do svojho štýlu vlastnosť Pozícia na pozadí. Týmto sa obrázok umiestni na presné miesto, kde by ste ho chceli zobraziť. Na dosiahnutie tohto efektu umiestnenia môžete použiť hodnoty pixelov, percentá alebo zarovnania.
Pozícia na pozadí: stred;