Od autora: Ahojte všetci. Farby pozadia a obrázky hrajú pri webdizajne obrovskú úlohu, pretože vám umožňujú navrhnúť akékoľvek prvky atraktívnejšie. Dnes sa pozrieme na to, ako urobiť pozadie v HTML.
Je možné použiť HTML na nastavenie pozadia?
Hneď poviem, že nie. Vo všeobecnosti nebolo html vytvorené na navrhovanie webových stránok. Len je to veľmi nepohodlné. Existuje napríklad atribút bgcolor, pomocou ktorého môžete nastaviť farbu pozadia, čo je však veľmi nepohodlné.
V súlade s tým budeme používať kaskádové štýly (CSS). Príležitostí na nastavenie pozadia je oveľa viac. Dnes sa pozrieme na tie najzákladnejšie.
Ako nastaviť pozadie pomocou css?
V prvom rade sa teda musíte rozhodnúť, ktorému prvku chcete nastaviť pozadie. To znamená, že musíme nájsť selektor, do ktorého napíšeme pravidlo. Napríklad, ak potrebujete nastaviť pozadie pre celú stránku ako celok, môžete to urobiť pomocou selektora tela a pre všetky bloky pomocou selektora div. No atď. Pozadie môže a malo by byť viazané na akékoľvek iné selektory: triedy štýlu, identifikátory atď.
Potom, čo ste sa rozhodli pre selektor, musíte napísať názov samotnej nehnuteľnosti. Ak chcete nastaviť farbu pozadia (konkrétne plnú farbu, nie gradient alebo obrázok), použite vlastnosť background-color. Za ním musíte vložiť dvojbodku a napísať samotnú farbu. Dá sa to urobiť rôznymi spôsobmi. Napríklad pomocou kľúčových slov, hexadecimálneho kódu, formátov rgb, rgba, hsl. Postačí akákoľvek metóda.
Najčastejšie používanou metódou je hexadecimálny kód. Na výber farieb môžete použiť program, ktorý zobrazí kód farby. Napríklad photoshop, farba alebo nejaký online nástroj. Podľa toho ako príklad napíšem všeobecné pozadie pre celú webovú stránku.
telo (farba pozadia: #D4E6B3; )
Tento kód je potrebné vložiť do sekcie hlavy. Je dôležité, aby boli súbory v rovnakom priečinku.
Obrázok ako pozadie
Na obrázok použijem malú ikonku. html jazyk:
Vytvorme prázdny blok s identifikátorom:
< div id = "bg" > < / div > |
Dajme tomu explicitné rozmery a pozadie:
#bg( šírka: 400px; výška: 250px; obrázok na pozadí: url(html.png); )
#bg( šírka: 400px; výška: 250px; obrázok na pozadí : url (html . png ) ; |
Z tohto kódu môžete vidieť, že som použil novú vlastnosť - background-image. Je určený špeciálne na vloženie obrázka ako pozadia do html prvku. Pozrime sa, čo sa stalo:
Ak chcete zadať obrázok, musíte napísať za dvojbodku kľúčové slovo url a potom v zátvorkách uveďte cestu k súboru. V tomto prípade je cesta špecifikovaná na základe skutočnosti, že obrázok je v rovnakom priečinku ako html dokument. Musíte tiež určiť formát obrázka.
Ak ste to urobili a pozadie sa v bloku stále nezobrazuje, znova skontrolujte, či ste správne napísali názov obrázka, či je správne nastavená cesta a prípona. Toto sú najčastejšie dôvody, prečo sa pozadie jednoducho nezobrazí, pretože prehliadač nemôže nájsť obrázok.
Ale všimli ste si jednu vec? Prehliadač vzal a znásobil obrázok v celom bloku. Takže, aby ste vedeli, toto je predvolené správanie obrázkov na pozadí - opakujú sa vertikálne a horizontálne, pokiaľ sa zmestia do bloku. Týmto správaním môžete ľahko ovládať. Na tento účel použite vlastnosť background-repeat, ktorá má 4 hlavné hodnoty:
Repeat – predvolená hodnota, obrázok sa opakuje na oboch stranách;
Repeat-x – opakuje sa len na osi x;
Repeat-y – opakuje sa iba pozdĺž osi y;
No-repeat – neopakuje sa vôbec;
Môžete napísať každú hodnotu a uvidíte, čo sa stane. Napíšem to takto:
background-repeat: repeat-x;
pozadie - repeat : repeat - x ; |
Teraz opakujte iba vodorovne. Ak nastavíte možnosť bez opakovania, bude tam iba jeden obrázok.
Skvelé, tu môžeme skončiť, keďže toto sú základné možnosti práce s pozadím, ale ukážem vám ešte 2 vlastnosti, ktoré vám umožnia získať väčšiu kontrolu.
Prostredníctvom opakovania boli dizajnéri rozloženia schopní vytvárať textúry pozadia a prechody pomocou jedného malého obrázka. Mohlo by to byť 30 x 10 pixelov alebo dokonca menšie. Alebo možno trochu viac. Obraz bol taký, že keď sa to opakovalo na jednej alebo aj na oboch stranách, nebolo vidieť žiadne prechody, takže výsledkom bolo jediné, bezproblémové pozadie. Mimochodom, tento prístup sa teraz oplatí použiť, ak chcete na svojom webe použiť ako pozadie súvislú textúru. Dnes už možno gradient implementovať pomocou metód css3, o tom si určite povieme neskôr.
Pozícia pozadia
V predvolenom nastavení bude obrázok na pozadí, pokiaľ nie je nastavený na opakovanie, v ľavom hornom rohu jeho bloku. Pozíciu je však možné jednoducho zmeniť pomocou vlastnosti background-position.
Môžete to nastaviť rôznymi spôsobmi. Jednou z možností je jednoducho uviesť strany, na ktorých by mal byť obrázok umiestnený:
pozadie-pozícia: vpravo hore;
poloha pozadia: vpravo hore; |
To znamená, že vertikálne zostáva všetko rovnaké: obrázok na pozadí je umiestnený navrchu, ale horizontálne sme zmenili stranu vpravo, teda vpravo. Ďalším spôsobom nastavenia pozície je percentuálny podiel. V tomto prípade sa odpočítavanie v každom prípade začína od ľavého horného rohu. 100% - celý blok. Aby sme teda obrázok umiestnili presne do stredu, napíšeme ho takto:
pozícia pozadia: 50 % 50 %;
pozícia pozadia: 50 % 50 %; |
Pri polohovaní si zapamätajte jednu dôležitú vec – prvým parametrom je vždy horizontálna poloha a druhým je vertikálna poloha. Ak teda uvidíte hodnotu 80% 20%, môžete okamžite dospieť k záveru, že obrázok na pozadí sa posunie veľmi doprava, ale veľmi neklesne.
A nakoniec môžete určiť polohu v pixeloch. Všetko je po starom, len namiesto % bude px. V niektorých prípadoch môže byť takéto umiestnenie potrebné.
Stenografický zápis
Súhlaste s tým, že kód sa ukáže ako dosť ťažkopádny, ak je všetko nastavené tak, ako sme to urobili. Ukazuje sa, že je potrebné špecifikovať cestu k obrázku, opakovanie a polohu. Samozrejme, opakovanie a umiestnenie nie sú vždy potrebné, ale v každom prípade by bolo správnejšie použiť pre vlastnosť skrátený zápis. Vyzerá to takto:
pozadie: #333 url(bg.jpg) bez opakovania 50 % 50 %;
pozadie: #333 url(bg.jpg) bez opakovania 50 % 50 %; |
To znamená, že prvým krokom je v prípade potreby zaznamenať celkovú plnú farbu pozadia. Potom cesta k obrázku, opakovanie a poloha. Ak niektorý parameter nie je potrebný, jednoducho ho vynechajte. Súhlasíte, je to oveľa rýchlejšie a pohodlnejšie a výrazne znižujeme aj náš kód. Vo všeobecnosti radím, aby ste vždy písali v skrátenej forme, aj keď potrebujete uviesť iba farbu alebo obrázok.
Ovládanie veľkosti obrázka na pozadí
Náš súčasný obrázok nie je veľmi dobrý na demonštráciu ďalšieho triku, takže vezmem ďalší. Nech je to veľkosť bloku alebo väčšia. Predstavte si teda, že stojíte pred úlohou vytvoriť obrázok na pozadí tak, aby úplne nevyplnil svoj blok. A napríklad obrázok je ešte väčší ako veľkosť bloku.
Čo môžete urobiť v tomto prípade? Samozrejme, najjednoduchšou a najrozumnejšou možnosťou by bolo jednoducho zmenšiť obrázok, ale nie vždy je to možné. Povedzme, že leží na serveri a v momentálne nie je čas ani príležitosť na jej zníženie. Problém je možné vyriešiť pomocou vlastnosti background-size, ktorú možno nazvať relatívne novou a ktorá vám umožňuje manipulovať s veľkosťou obrázka na pozadí, alebo vlastne akéhokoľvek pozadia.
Takže môj obrázok teraz zaberá celý priestor v bloku, ale dám mu veľkosť pozadia:
veľkosť pozadia: 80 % 50 %;
veľkosť pozadia: 80 % 50 %; |
Opäť platí, že prvý parameter nastavuje horizontálnu veľkosť, druhý - vertikálnu veľkosť. Vidíme, že všetko bolo aplikované správne - fotografia sa stala 80% šírky bloku na šírku a polovicu na výšku. Tu je potrebné urobiť len jedno upresnenie - nastavením veľkosti v percentách môžete ovplyvniť proporcie obrázka. Takže buďte opatrní, ak nechcete narušiť proporcie.
Ako môžete hádať, veľkosť pozadia môže byť špecifikovaná aj v pixeloch. Môžete použiť aj ďalšie dve kľúčové slová:
Obálka – obrázok bude zmenšený tak, aby aspoň na jednej strane úplne vyplnil blok.
Obsah – upraví veľkosť tak, aby sa obrázok úplne zmestil do bloku pri jeho maximálnej veľkosti.
Výhodou týchto hodnôt je, že nemenia proporcie obrazu, pričom ich ponechávajú rovnaké.
Mali by ste tiež pochopiť, že natiahnutie obrázka môže viesť k zhoršeniu jeho kvality. Môžem uviesť príklad zo života a reálnej praxe dispozičných dizajnérov. Každý vie a chápe, že pri navrhovaní pre stolné počítače je potrebné prispôsobiť stránku šírke hlavného monitora: 1280, 1366, 1920. Ak odfotíte obrázok na pozadí s veľkosťou povedzme 1280 x 200 a nedáte veľkosť pozadia, potom obrazovky s väčšou šírkou Objaví sa prázdne miesto, obrázok nevyplní celú šírku.
V 99% prípadov to web developerovi nevyhovuje, preto nastaví background-size: cover tak, aby sa obrázok vždy natiahol na maximálnu šírku okna. Je to dobrá technika, ale teraz budete čeliť problému, že používatelia so šírkou obrazovky 1920 pixelov môžu vidieť neoptimálnu kvalitu obrazu.
Pripomínam, že sa natiahne do maximálnej šírky. V súlade s tým sa kvalita automaticky zhorší. Jediným správnym riešením by bolo na začiatku použiť väčší obrázok – široký 1920 pixelov. Potom na najširších obrazovkách bude vo svojej prirodzenej veľkosti a na iných bude jednoducho postupne orezaný, ale zároveň pri správnom výbere obrázka na pozadí, vzhľad Toto neovplyvní stránku.
Vo všeobecnosti je to len 1 príklad, ako využiť znalosti, ktoré ste získali v tomto článku, pri zostavovaní skutočných rozložení.
Priesvitné pozadie pomocou css
Ďalšia funkcia, ktorú je možné implementovať pomocou pomocou css – priesvitné pozadie. To znamená, že cez toto pozadie bude možné vidieť, čo je za tým.
Ako príklad nastavím celú stránku ako pozadie k obrázku, ktorý sme použili skôr v príkladoch. Pre blok s identifikátorom bg, na ktorom vykonávame všetky naše experimenty, nastavíme pozadie pomocou formátu nastavenia farieb rgba.
Ako som už povedal, existuje veľa formátov na nastavenie farieb v CSS. Jedným z nich je rgb, pomerne známy formát pre tých, ktorí pracujú grafických editorov. Píše sa takto: rgb(17, 255, 34);
Prvá hodnota v zátvorkách je sýtosť červenej, potom zelenej a potom modrej. Hodnota môže byť numerická od 0 do 255. Formát rgba sa teda nelíši, pridáva sa iba jeden parameter - alfa kanál. Hodnota môže byť od 0 do 1, kde 0 je úplná priehľadnosť.
Vlad Merževič
Vzhľadom na zvláštnosti webových stránok zohrávajú obrázky na pozadí významnú úlohu pri usporiadaní dokumentov lokality. Zároveň sa aktívne zapájajú do rôznych vecí, napríklad automatizujú proces pripájania obrázkov k textu, vytvárajú prechody a samozrejme pridávajú pozadie pod obsah. Nižšie sú uvedené niektoré aspekty používania obrázkov na pozadí.
Pozadie na webovej stránke
Nastavenie obrázka pozadia na webovej stránke sa tradične uskutočňuje prostredníctvom atribútu pozadia značky.
.Tento vzor sa opakuje vodorovne a zvisle, čím vyplní celé okno prehliadača. Je jasné, že tu neexistujú žiadne špeciálne možnosti pre kreativitu, takže sa pozrime na štýly a uvidíme, čo sa dá urobiť pomocou CSS.
CSS má päť atribútov, ktoré riadia obrázok na pozadí: jeho pridanie, umiestnenie a opakovanie. Všetky tieto parametre však nahrádza jedna univerzálna vlastnosť background , ktorú využijeme aj v budúcnosti.
Pridanie obrázka prebieha nastavením adresy obrázka pomocou kľúčového slova url. Na ovládanie opakovania obrázka sa používajú argumenty no-repeat, repeat-x (opakovať horizontálne) a repeat-y (opakovať vertikálne). Vďaka tomu môžete získať webovú stránku zobrazenú na obr. 1.
Ak chcete nastaviť obrázok na webovú stránku, musíte do selektora BODY pridať vlastnosť štýlu pozadia, ako je uvedené v príklade 1.
Príklad 1: Obrázok na pozadí
V tomto príklade je grafický target.gif definovaný ako pozadie webovej stránky bez opakovania obrázka. Aby sa zabránilo tomu, že obrázok tesne prilieha k okrajom prehliadača, je posunutý o 30 pixelov doprava a 20 pixelov nadol z pôvodnej polohy.
Opakovanie vzoru
Vzhľadom na to, že vzor pozadia môžete nastaviť tak, aby sa opakoval horizontálne alebo vertikálne, je k dispozícii niekoľko možností pre dizajn webových stránok. Napríklad na vytvorenie zvislého pruhu pozdĺž ľavého okraja (obr. 2) budete potrebovať obrázok znázornený na obr. 3.
Dizajn musí byť taký, aby do seba vertikálne zapadal bez viditeľných švov a zároveň tvoril jeden celok so zadanou farbou pozadia webovej stránky.
Príklad 2 ukazuje, ako vytvoriť takýto obrázok na pozadí, opäť pomocou vlastnosti pozadia a jej hodnoty repeat-y.
Príklad 2. Vertikálne opakovanie pozadia
Podobne môžete pozadie zopakovať vodorovne, napríklad vytvorením prechodu a jeho nastavením ako obrázok na pozadí (obr. 4).
Ak chcete získať webovú stránku zobrazenú na obr. 4, najprv budete musieť urobiť obrázok s prechodom gradientu. Šírka je dostatočná na určenie 20-40 pixelov a výška obrázka závisí od účelu dokumentu a očakávanej výšky obsahu webovej stránky. Nezabudnite tiež, že veľký výkres zväčší veľkosť grafického súboru. A to negatívne ovplyvní jeho rýchlosť načítania a v konečnom dôsledku povedie k pomalšiemu zobrazovaniu na pozadí. Pre tento prípad sa celkom hodil obrázok 30x200 pixelov (obr. 5).
Príklad 3 ukazuje kód HTML na vytvorenie pozadia s prechodom.
Lorem ipsum...
Dizajn prechodu sa dobre hodí k jednofarebnému bloku, takže v tomto príklade pridáme vrstvu na zobrazenie obsahu webovej stránky.
Použitím obrázka na pozadí môžete automatizovať proces pridávania grafiky do konkrétneho textu, ako sú napríklad nadpisy. Na to použite univerzálnu vlastnosť pozadia, ktorá sa aplikuje na požadovaný selektor. Hodnota je cesta k obrázku a aby sa zabránilo opakovaniu, argument no-repeat (príklad 4).
Príklad 4: Pridanie obrázka
Smerovanie
Hlavný text
Ako je znázornené v tomto príklade, obrázok je možné posúvať horizontálne a vertikálne vzhľadom na jeho pôvodnú polohu, štandardne je to ľavý horný roh blokový prvok. Posun pozadia vám umožňuje umiestniť obrázok vo vzťahu k textu požadovaným spôsobom. Aby sa text neprekrýval s obrázkom, musíte pridať vlastnosť padding-left, vďaka ktorej sa text posunie doprava o zadanú vzdialenosť. V každom prípade je to individuálne a zvyčajne sa rovná šírke obrázka plus požadovanej medzere medzi obrázkom a textom.
Takmer každý populárny web má pekný vzhľad. Dôležitou súčasťou dizajnu webových stránok je pozadie, nazývané aj pozadie, ktoré si môže vytvoriť alebo zmeniť každý z nás. V tomto článku vám poviem, ako umiestniť pozadie na webovú stránku.
Vytvorenie nového pozadia pre webové stránky
Na dokončenie úlohy môžete použiť jednu zo 4 metód:
- 1. Pozadie s jednou farbou
- 2. Pozadie s textúrou
- 3. Pozadie pomocou gradientu
- 4. Pozadie z veľkého obrázka
Vytvorte pozadie pomocou jednej farby
Ak chcete vytvoriť alebo zmeniť pozadie stránky, ktoré pozostáva z jednej farby, musíte prejsť do súboru style.css, v ktorom nájdite hodnotu - telo (zodpovedá za hlavné telo stránky). Teraz musíte zaregistrovať funkciu farby pozadia, ak neexistovala, a uviesť kód farby. V prípade, že potrebujete vytvoriť biele pozadie pre webovú stránku, budete musieť napísať nasledujúci kód:
farba pozadia: #83C5E9 ; (modré pozadie, ako v príklade)
Kompletný zoznam farieb nájdete na stránke - (STM). Ak chcete zmeniť farbu, jednoducho zmeňte hodnotu za dvojbodkou a užite si svoje úsilie.
Vytvorenie pozadia pomocou textúry
Táto metóda je v poslednej dobe obzvlášť populárna, pretože vám umožňuje vytvoriť krásne pozadie pre stránku. Textúry môžu byť jednoduché, ale veľmi krásne, a preto sa často používajú. Ak chcete pripojiť akúkoľvek textúru, musíte ju nahrať do priečinka s obrázkami na hostingu, kde je nainštalovaná vaša stránka. Potom by ste mali napísať nasledujúci kód:
farba pozadia: #537759;
background-image: url(images/pattern.png);
Tento kód obsahuje známy parameter pre zachovanie farby (je zelená) a prvok, ktorý je zodpovedný za prepojenie zelenej textúry.
Vytvorenie pozadia pomocou gradientu
Akýkoľvek obrázok, ktorý je pripojený pomocou funkcií css, je možné opakovať horizontálne aj vertikálne (pozdĺž osí X A Y). Táto príležitosť nám umožňuje vytvoriť pre stránku akékoľvek jednoduché pozadie vlastnými rukami. Ak to chcete urobiť, musíte vytvoriť gradient široký 1 megapixel (pozri obrázok nižšie), uložiť ho ako obrázok a nahrať na svoj hosting. Potom môžete napísať potrebný kód, konkrétne:
farba pozadia: #83C5E9;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
V tomto súbore je v poradí podľa priority funkcia zodpovedná za farbu pozadia, ktorú používame na zaistenie. Potom parameter, ktorý je zodpovedný za pripojenie gradientu a nakoniec funkcia, ktorá je zodpovedná za opakovanie gradientu pozdĺž osi X.
Použitie veľkého obrázka na pozadie webovej stránky
Táto metóda je druhá najpopulárnejšia, pretože vám umožňuje použiť rôzne obrázky na vytvorenie pozadia. Na implementáciu tejto metódy stačí stiahnuť veľký obrázok do priečinka s obrázkami stránok a napíšte nasledujúci kód:
farba pozadia: #000000;
background-image: url(images/image title.jpg);
background-position: center top;
background-repeat: no-repeat;
Ak je všetko jasné s prvými dvoma parametrami, potom je potrebné pokryť posledné dva. Tretia funkcia umožňuje opraviť obrázok v strede stránky a posledný parameter blokuje jeho opakovanie v celej štruktúre stránky.
Zmena pozadia na weboch ucoz
Tieto metódy vytvárania pozadia pre webovú stránku možno použiť na rôznych systémov správa stránok, ale nie na stránkach - ucoz. Ak chcete zmeniť pozadie webovej stránky ucoz, musíte prejsť na ovládací panel lokality, prejdite na "Manažment dizajnu" a potom dovnútra "Úprava šablón".
Teraz musíte otvoriť šablónu štýlov (CSS), nájsť riadok "telo" a parametrom "pozadie". Potom musíte skopírovať odkaz, vložiť ho do internetového prehliadača a budete mať prístup k obrázku, ktorý bol pozadím.
Ak chcete použiť nové pozadie, stačí ho nahrať do Správca súborov. Zároveň sa uistite, že názov nového obrázka na pozadí je rovnaký ako pred zmenou. Uložte svoju prácu a prejdite na webovú stránku, kde nájdete vykonanú prácu.
Zmena pozadia stránky na HTML
Ak chcete vytvoriť pozadie na html stránke pomocou obrázka, jednoducho zadajte riadok do kódu:
A ak chcete vytvoriť pozadie stránky pomocou farby, riadok by mal vyzerať takto:
Týmto sa náš príbeh končí. Teraz viete, ako vytvoriť pozadie pre webovú stránku. Šťastné projekty!
Moderné prehliadače vám umožňujú pridať k prvku ľubovoľný počet obrázkov na pozadí, pričom sú uvedené parametre každého pozadia oddelené čiarkami. Stačí použiť vlastnosť universal background a zadať pre ňu najprv jedno pozadie a druhé oddeliť čiarkou.
Ako roztiahnuť pozadie na celú šírku okna?
Ak chcete zmeniť veľkosť pozadia, použite vlastnosť background-size, nastavte jej hodnotu na 100%, potom bude pozadie zaberať celú šírku okna prehliadača. Pre staršie verzie prehliadačov by ste mali používať špecifické vlastnosti s predponami, ako je uvedené v príklade 1.
Ako pridať obrázok na pozadí na webovú stránku?
Ak chcete pridať obrázok pozadia na webovú stránku, nastavte cestu k obrázku v rámci hodnoty url vlastnosti štýlu pozadia, ktorá sa následne pridá do selektora tela.
Je možné urobiť animované pozadie?
Animácia je pomerne výkonná technika, ktorá dokáže oživiť akýkoľvek dokument, takže nie je prekvapujúce, že technológia Flash, ktorá pridáva na webové stránky karikatúry, a k tomu interaktívne, sa stala mimoriadne populárnou. Grafický formát GIF tiež podporuje jednoduchú animáciu postupnou zmenou snímok. Takže pomocou obrázka v tomto formáte je možné animovať nielen jednotlivé obrázky, ale aj pozadie webovej stránky alebo konkrétneho prvku.
Najprv budete musieť vytvoriť animovaný obrázok vo formáte GIF, na ktorý môžete program použiť Adobe Photoshop alebo iné vhodné na tento účel. Existujú aj knižnice hotových animovaných súborov, ktoré možno použiť ako obrázok na pozadí. Potom sa obrázok pridá ako pozadie pomocou vlastnosti štýlu pozadia, ako je uvedené v príklade 1.
Ako umiestniť obrázok na pozadí do pravého dolného rohu stránky?
Na ovládanie pozície obrázka pozadia na stránke sa používa vlastnosť background-position style, ktorá súčasne nastavuje horizontálne a vertikálne súradnice obrázku. Ak chcete zrušiť opakovanie obrázka na pozadí, použite vlastnosť background-position s hodnotou no-repeat .
Ako dosiahnuť, aby sa pozadie neopakovalo?
V predvolenom nastavení sa obrázok na pozadí opakuje horizontálne a vertikálne a tvorí mozaiku cez celé pole webovej stránky. Toto správanie na pozadí sa však nie vždy vyžaduje, najmä v prípade jedného obrázka pomoc príde neopakovateľná hodnota pridaná k vlastnosti štýlu pozadia.
Ako môžem nastaviť, aby sa pozadie opakovalo iba vertikálne?
Opakovanie pozadia sa zvyčajne vyžaduje na vytvorenie dekoratívnych čiar alebo prechodov, ktoré sú viazané na výšku prvku webovej stránky alebo okna. V takýchto prípadoch opakované zvislé pozadie poskytuje konzistentný obraz bez ohľadu na veľkosť prvkov. Najprv by ste sa mali uistiť, že sa obrázok na pozadí opakuje bez švov.
Stručná informácia
CSS verzie
hodnoty
url Hodnota je cesta k grafický súbor, ktorý je špecifikovaný vo vnútri konštrukcie url(). Cesta k súboru môže byť napísaná buď v úvodzovkách (dvojitých alebo jednoduchých) alebo bez nich.none Zakáže obrázok na pozadí prvku.
HTML5 CSS2.1 IE Cr Op Sa Fx
obrázok na pozadí
Objektový model
document.getElementById("elementID ").style.backgroundImage Prehliadače
Internet Explorer
do verzie 7.0 vrátane, aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout , vlastnosť background-image bude rešpektovať hranice prvku, ako je uvedené v špecifikácii. Rozdiel v zobrazení bude viditeľný, ak budú okraje prerušované alebo bodkované, a nie plné.
Ak je prvok nastavený na posúvanie alebo automatické posúvanie , Internet Explorer 8 bude mať pri posúvaní pozadia vertikálne oneskorenie o jeden pixel.
none Zakáže obrázok na pozadí prvku.
| 1 | 2 | 3 |
), potom ho Chrome, Safari, iOS nezobrazia tak, ako predpisuje špecifikácia, a to pre každú bunku samostatne. Zatiaľ čo prehliadač by mal zobrazovať pevné pozadie pre celý riadok. Príklad 2 ukazuje kód demonštrujúci chybu. Zázemie pre TR Výsledok tento príklad V Prehliadač Chrome znázornené na obr. 1.
Internetový prehliadač
Prieskumník, Opera a Firefox správne zobrazujú pozadie pre linku (obr. 2).