Pozadie

Doteraz sme sa naučili zadávať rozmery jednotlivých elementov, určiť ich orámovanie (farba, hrúbka, štýl) a okraje (vonkajšie a vnútorné). Posledný parameter, ktorým môžeme určiť vhľad jednotlivých elementov, je ich pozadie. Pozadím sa myslí v podstate výplň elementu, čiže priestor vo vnútri orámovania. Najčastejšie býva pozadím elementu len odlišná farba od okolia alebo nejaký obrázok. Niekedy býva celá webstránka vyplnená nejakou grafikou, buď jedným veľkým obrázkom alebo opakujúcim sa grafickým objektom. Jazyk CSS poskytuje celkom šikovné nastavenia, ktoré zjednodušujú aj tento na prvý pohľad náročný (vzhľadom na veľkosť obrázkov) spôsob určenia pozadia.

 

Vlastnosť pre určenie pozadia v jazyku CSS nesie meno background (pozadie). Keďže je pri pozadí možné určiť viacero parametrov, podobne ako tomu bolo pri predchádzajúcich properties, aj tu je možné zadať skrátené pravidlo alebo zadefinovať jednotlivé vlastnosti osobitne. Základná vlastnosť pozadia určujúca jeho farbu je background-color, ktorej hodnota je farba, v našom prípade zatiaľ slovný názov farby. Zadefinovanie tejto vlastnosti určí farbu, ktorou vyplní celý vnútorný priestor elementu. Táto vlastnosť nemá žiadne iné možné nastavenia a spôsoby využitia, poďme si ju teda rýchlo vyskúšať:

 

<!DOCTYPE html>
<html>
    <body style="background-color: yellow;">

        <div style="height: 300px; border: 1px solid black; background-color: grey; padding: 20px;">
            <h2 style="background-color: white; padding: 20px;">Kazdy element moze mat svoje vlastne pozadie :)</h2>
        </div>

    </body>
</html>

 

 

Oveľa viacej možností je pri použití obrázka ako pozadia. Systém je podobný, ako to bolo pri tagu img v jazyku HTML. Pomocou URL adresy, na ktorej je uložený obrázok, zadefinujeme, čo sa má zobraziť v pozadí elementu. Vzhľadom k tomu, že obrázok má svoj vlastný rozmer (šírka, výška), treba myslieť na to, že môže byť menší, rovný alebo väčší ako element, v ktorom sa má zobraziť. Vlastnosť definujúca obrázok v pozadí má meno background-image, ktorej hodnota je slovo url, za ktorým je v zátvorke v jednoduchých úvodzovkách zadaná url adresa obrázka. Na ukážku použijeme obrázok dostupný na internete, ktorý sa nachádza na adrese https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300. Na viacerých príkladoch si vyskúšame, čo sa stane, ak element bude menší ako obrázok, rovnaký, väčší a taktiež použijeme tag img pre lepšie pochopenie:

 

<!DOCTYPE html>
<html>
    <body style="padding 20px;">

        <img style="border: 2px solid red;" src="https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300">

        <img style="border: 2px solid red; height: 100px; width: 100px;" src="https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300">

        <div style="height: 150px; width: 150px; border: 1px solid black; background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300'); margin-bottom: 30px;">
        </div>

        <div style="height: 300px; width: 300px; border: 1px solid black; background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300'); margin-bottom: 30px;">
        </div>

        <div style="height: 500px; width: 500px; border: 1px solid black; background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300'); margin-bottom: 30px;">
        </div>

    </body>
</html>

 

 

Poďme si rozobrať našu ukážku. Na začiatku ukážky je tag img bez zadania rozmerov, takže zobrazuje obrázok v jeho pôvodnej veľkosti, rozmer výsledného elementu je 300x300 pixelov. Druhému tagu img sme zadali rozmer 100x100, ktorý je menší ako zdrojový obrázok (300x300), takže sa obrázok zmenšil (stiahol) do výsledného rozmeru, ktorý je dodržaný. Výsledný element zachoval zadanú veľkosť 100x100, do ktorej zmestil obrázok s rozmermi 300x300, takže je vidno celý obrázok, len zmenšený. Prvému divu sme zadali rozmer 150x150 a vložili do pozadia náš obrázok pomocou CSS. Všimnite si rozdielne správanie zobrazenia. Pri tagu img s menšími rozmermi ako zdrojový obrázok sa obrázok do menšieho elementu zobrazil celý a zmenšený. V tomto prípade, pri použití vlastnosti border-image, sa obrázok zobrazí, ale zobrazí sa len jeho vyrezaná časť, resp. taká veľká časť od ľavého horného rohu, ako je veľký cieľový element. Zvyšok obrázka je neviditeľný. V druhom prípade, kedy má div rovnaké rozmery ako obrázok z pozadia, je zobrazený celý obrázok, pretože sa akurát zmestí do svojho cieľového elementu. V treťom prípade je náš div väčší, čiže má priestor na to, aby sa v ňom obrázok zobrazil viackrát.

 

A presne toto je defaultné správanie sa vlastnosti background. Všimnite si, že obrázok je v treťom dive naukladaný vedľa seba v riadkoch a stĺpcoch v pôvodnom rozlíšení (pôvodný rozmer). Obrázok sa ukladá za sebou, začína sa ľavým horným rohom. Ak je napravo ešte priestor, čiže ak je šírka v tomto prípade cieľového elementu väčšia ako 300 pixelov, uloží sa napravo ďalší obrázok. Ak je miesto aj pod, čiže height je viac ako 300 pixelov, začína sa nový riadok rovnakým spôsobom. Takto to ide dovtedy, až nie je zaplnená celá plocha cieľového elementu. Toto správanie sa zadáva pomocou vlastnosti background-repeat (repeat-opakovať), ktorej defaultná hodnota je repeat, čo zapríčiní opakovanie obrázka (pozadia) horizontálne (do riadku, po x-ovej osi) a aj vertikálne (zvyslo, po y-ovej osi). V prípade, že chceme, aby sa obrázok opakoval len jedným smerom, čiže aby vyplnil celý cieľový element len v jednom smere (horizontálne alebo vertikálne), zadávame hodnotu repeat-x (horizontálne) alebo repeat-y (vertikálne). V prípade, že chceme, aby sa obrázok zobrazil iba raz, použijeme hodnotu no-repeat (neopakovať). Táto vlastnosť sa využíva v praxi veľmi často, dostaneme sa k nej ešte na záver tejto kapitoly.

 

Zamyslime sa nad prípadom tretieho divu s nastavením vlastnosti background-repeat s hodnotou no-repeat. Toto pravidlo zabezpečí, že v prípade, že by sa obrázok priradený v proprety background-image zmestil viackrát do cieľového elementu, sa obrázok zobrazí iba raz, v ľavom hornom rohu. To, kde sa obrázok v tomto prípade zobrazí, sa dá nastaviť pomocou vlastnosti background-position, ktorej defaultná hodnota je left top (ľavý horný roh). Hodnotou je jednoslovné alebo dvojslovné určenie miesta, kde prvé slovo značí horizontálne umiestnenie (left-vľavo, center-v strede, right-vpravo) a druhé slovo vertikálne (top-na vrchu, center-v strede, bottom-spodok). Ak sa vertikálne umiestnenie nešpecifikuje, defaultne sa berie center. Hodnotou tejto vlastnosti môže byť aj iné vyjadrenie umiestnenia, napríklad aj konkrétna pozícia zadaním súradníc x a y v pixeloch (horizontálna vzdialenosť v pixeloch od ľavého horénho rohu a vertikálna smerom od ľavého horného rohu smerom nadol). V nasledujúcej ukážke použijeme vlastnosti background-repeat a background-position:

 

<!DOCTYPE html>
<html>
    <body style="padding 20px;">


        <div style="
                    height: 500px;
                    width: 500px;
                    border: 1px solid black;
                    background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300');
                    background-repeat: repeat-y;
                    margin-bottom: 30px;">
        </div>

        <div style="
                    height: 500px;
                    width: 500px;
                    border: 1px solid black;
                    background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300');
                    background-repeat: repeat-x;
                    background-position: center center;
                    margin-bottom: 30px;">
        </div>

        <div style="
                    height: 500px;
                    width: 500px;
                    border: 1px solid black;
                    background-image: url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300');
                    background-repeat: no-repeat;
                    background-position: right bottom;
                    margin-bottom: 30px;">
        </div>


        <div style="
                    height: 500px;
                    width: 500px;
                    border: 1px solid black;
                    background: yellow url('https://lh6.ggpht.com/uDbPLvpQt37yWYfK3F2b9rCT8S9U3bxP5zChCxLvHJA7DcwtwoyeqhULTe24Uo9okSs=w300') no-repeat 20px 50px;
                    margin-bottom: 30px;">
        </div>

    </body>
</html>

 

 

V prvom dive sme nastavili opakovanie pozadia (obrázka pozadia) iba vertikálne. Neurčili sme vlastnosť background-position, takže sa opakuje od ľavého horného rohu. V druhom prípade sme určili opakovanie horizontálne a zadali sme aj vlastnosť background-position s hodnotami pre stred. Preto sa prvý obrázok (v plnej veľkosti) zobrazuje v strede (aj po x-ovej aj po y-ovej osi) a zvyšok opakovanie sa aplikuje po celej šírke (horizontálne). V treťom prípade sme nepoužili opakovanie, takže sa obrázok zobrazil iba raz a určili sme aj jeho pozíciu v pravom dolnom rohu (right bottom). V poslednom dive sme si názorne ukázali zadanie pozície obrázka v pozadí pomocou súradnich x y. V tomto prípade sa obrázok zobrazuje 20 pixelov od ľavého kraja a 50 pixelov od vrchu. Tak ako pri predchádzajúcich vlastnostiach, aj pri vlastnosti background je možné zadať hodnoty jednotlivých vlastností skrátene pomocou vlastnosti background. V tomto prípade nie je nutné zadať všetky vlastnosti, je nutné však dodržať poradie a to je color, image, repeat, attachment a position. Tento spôsob zápisu sme použili pri poslednom dive. Všimnite si, že je možné použiť aj farbu aj obrázok zároveň. Toto je možné, pokiľa je obrázok priesvitný alebo nepokrýva celú plochu, k priehľadnosti obrázkov sa však dostaneme neskôr.

 

Vlastnosť background sa nepoužíva len ako pozadie divov alebo celej webstránky a podobne. Má oveľa viacej využití, v podstate všetky obrázky, ktoré sa nachádzajú na stránke, môžu byť zadefinované cez túto vlastnosť. Veľmi často sa využíva ako pozadie odkazov. Odkaz býva zvyčajne text alebo nejaké tlačítko. Pred textom býva často nejaký malý obrázok – ikonka, ktorá je umiestnená v odkaze ako jeho pozadie. V prípade tlačítka je to celý obrázok aj s textom. Ako sme už skorej naznačili, vlastnosť repeat má veľkú výhodu pri definovaní pozadia pre celú stránku. Ako ste videli, pomocou jedného obrázka vieme touto vlastnosťou vyplniť celý zobrazovaný priestor stránky. Čiže nepotrebujeme obrázok obrovských rozmerov, ktorý by mal aj patrične veľkú veľkosť, ale stačí nám malý obrázok, ktorý svojim opakovaním vyplní celý priestor. Táto metóda sa využíva veľmi často pomocou textúry, čo je zvyčajne malý obrázok, ktorý svojim opakovaním vytvára jednoliate pozadie. Pri textúre nevidno hrany medzi znovapriložením obrázka. Tieto spôsoby si vysvetlíme na našej stránke neskôr, keď si budeme spolu robiť nejakú reálnu webstránku so všetkým, čo k tomu patrí. Často to býva aj obrázok, ktorý má napríklad veľký jeden rozmer, ale druhý rozmer napríklad široký len 1 pixel. Ukážme si len narýchlo, o čom je reč, pozrite si, ako vyzerá samotný obrázok na tejto adrese :


https://rfclipart.com/image/small/ae-c6-b9/abstract-geometric-texture-seamless-oriental-ornament-Download-Royalty-free-Vector-File-EPS-200085.jpg:

 

<!DOCTYPE html>
<html>
    <body style="background: url('https://rfclipart.com/image/small/ae-c6-b9/abstract-geometric-texture-seamless-oriental-ornament-Download-Royalty-free-Vector-File-EPS-200085.jpg')">

    </body>
</html>

 

Máte nejakú otázku alebo Vám niečo nie je jasné? Napíšte nám na info@zacni-programovat.sk a poradíme!

Ťažko sa vám učí samému?

Máte problémy s niektorými časťami alebo sa neviete učiť sám? Využite našu možnosť individuálnej asistencie:

  • samostatný prístup
  • vysvetlenie nejasností prebraného učiva
  • úlohy a cvičenia navyše
  • všetko z pohodlia domova cez mail a skype

Pre viac info kliknite tu

Kľúčové slová prednášky

css pozadiecss backgroundpozadieobrazokobrazok do pozadiabackgroundbackground-colorbackground-color

IT ftip

Programátor je u očného. Doktor ho usadí a hovorí: - Čítajte! - T F U K M C L... Pán doktor, máte dobre nastavenú kódovú stránku?