Od autora: Pozdrav svima. Boje pozadine i slike igraju ogromnu ulogu u web dizajnu, jer vam omogućavaju da dizajnirate sve elemente atraktivnije. Danas ćemo pogledati kako napraviti pozadinu u HTML-u.
Da li je moguće koristiti HTML za postavljanje pozadine?
Odmah ću reći da ne. Generalno, html nije kreiran za dizajniranje web stranica. Samo je veoma nezgodno. Na primjer, postoji atribut bgcolor, pomoću kojeg možete postaviti boju pozadine, ali to je vrlo nezgodno.
U skladu s tim, koristićemo Cascading Style Sheets (CSS). Postoji mnogo više mogućnosti za postavljanje pozadine. Danas ćemo pogledati najosnovnije.
Kako postaviti pozadinu koristeći css?
Dakle, prije svega, morate odlučiti na koji element želite postaviti pozadinu. Odnosno, moramo pronaći selektor kojem ćemo napisati pravilo. Na primjer, ako trebate postaviti pozadinu za cijelu stranicu u cjelini, to možete učiniti preko selektora tijela, a za sve blokove preko selektora div. pa itd. Pozadina može i treba biti vezana za bilo koji drugi selektor: klase stilova, identifikatore, itd.
Nakon što ste se odlučili za selektor, potrebno je da napišete naziv samog svojstva. Da biste postavili boju pozadine (odnosno punu boju, a ne gradijent ili sliku), koristite svojstvo background-color. Nakon njega treba staviti dvotočku i napisati samu boju. To se može učiniti na različite načine. Na primjer, korištenjem ključnih riječi, hex koda, rgb, rgba, hsl formata. Bilo koja metoda će poslužiti.
Metoda koja se najčešće koristi je heksadecimalni kod. Za odabir boja možete koristiti program koji prikazuje kod boje. Na primjer, photoshop, paint ili neki online alat. U skladu s tim, kao primjer, napisat ću opću pozadinu za cijelu web stranicu.
tijelo (boja pozadine: #D4E6B3; )
Ovaj kod treba umetnuti u odjeljak za glavu. Važno je da se fajlovi nalaze u istom folderu.
Slika kao pozadina
Koristiću malu ikonu kao sliku. html jezik:
Kreirajmo prazan blok sa identifikatorom:
< div id = "bg" > < / div > |
Hajde da mu damo eksplicitne dimenzije i pozadinu:
#bg( širina: 400px; visina: 250px; background-image: url(html.png); )
#bg( širina: 400px; visina: 250px; pozadina - slika : url (html . png ) ; |
Iz ovog koda možete vidjeti da sam koristio novo svojstvo - background-image. Namijenjen je posebno za umetanje slike kao pozadine u html element. Da vidimo šta se desilo:
Da biste naveli sliku, morate pisati nakon dvotočka ključna riječ url, a zatim naznačite putanju do datoteke u zagradama. U ovom slučaju, putanja se određuje na osnovu činjenice da se slika nalazi u istom folderu kao i html dokument. Također morate odrediti format slike.
Ako ste to učinili, a pozadina se i dalje ne prikazuje u bloku, provjerite ponovo da li ste ispravno napisali naziv slike, da li su staza i ekstenzija ispravno postavljeni. Ovo su najčešći razlozi zašto se pozadina jednostavno ne pojavljuje jer pretraživač ne može pronaći sliku.
Ali da li ste primetili jednu stvar? Pregledač je uzeo i umnožio sliku kroz cijeli blok. Dakle, samo da znate, ovo je podrazumevano ponašanje pozadinskih slika - one se ponavljaju okomito i horizontalno sve dok mogu da stanu u blok. Ovakvim ponašanjem možete lako kontrolisati. Da biste to učinili, koristite svojstvo background-repeat, koje ima 4 glavne vrijednosti:
Ponavljanje – podrazumevana vrednost, slika se ponavlja sa obe strane;
Repeat-x – ponavlja se samo na osi x;
Repeat-y – ponavlja se samo duž y ose;
Bez ponavljanja – uopšte se ne ponavlja;
Možete napisati svaku vrijednost i vidjeti šta će se dogoditi. Napisacu to ovako:
background-repeat: repeat-x;
pozadina - ponavljanje: ponavljanje - x; |
Sada ponovite samo horizontalno. Ako postavite bez ponavljanja, tada bi bila samo jedna slika.
Odlično, ovdje možemo završiti, pošto su to osnovne mogućnosti rada sa pozadinom, ali pokazaću vam još 2 svojstva koja vam omogućavaju da dobijete veću kontrolu.
Kroz ponavljanje, dizajneri rasporeda su nekada bili u mogućnosti da kreiraju pozadinske teksture i gradijente koristeći jednu malu sliku. Može biti 30 puta 10 piksela ili čak i manji. Ili možda malo više. Slika je bila takva da kada se ponavlja na jednoj ili čak na obje strane, nikakvi prijelazi nisu bili vidljivi, tako da je rezultat bila jedna, besprijekorna pozadina. Usput, ovaj pristup vrijedi koristiti sada ako želite koristiti bešavnu teksturu na svojoj web stranici kao pozadinu. Danas se gradijent već može implementirati pomoću css3 metoda, o tome ćemo svakako kasnije.
Položaj u pozadini
Podrazumevano, pozadinska slika, osim ako nije podešena na ponavljanje, biće u gornjem levom uglu svog bloka. Ali pozicija se može lako promijeniti korištenjem svojstva background-position.
Možete ga postaviti na različite načine. Jedna od opcija je jednostavno naznačiti strane na kojima bi se slika trebala nalaziti:
background-position: desno gore;
pozadina - pozicija: desno gore; |
Odnosno, okomito sve ostaje isto: pozadinska slika se nalazi na vrhu, ali horizontalno smo promijenili stranu udesno, odnosno desno. Drugi način da postavite poziciju je kao postotak. U ovom slučaju, odbrojavanje počinje u svakom slučaju od gornjeg lijevog ugla. 100% - cijeli blok. Dakle, da bismo sliku postavili tačno u centar, pišemo je ovako:
pozadinski položaj: 50% 50%;
pozadinski položaj: 50% 50%; |
Zapamtite jednu važnu stvar o pozicioniranju - prvi parametar je uvijek horizontalni položaj, a drugi vertikalni položaj. Dakle, ako vidite vrijednost od 80% 20%, onda možete odmah zaključiti da će pozadinska slika biti pomaknuta dosta udesno, ali se neće mnogo smanjiti.
I konačno, možete odrediti poziciju u pikselima. Sve je isto, samo će umjesto % biti px. U nekim slučajevima, takvo pozicioniranje može biti neophodno.
Stenografija
Slažem se da kod ispada prilično glomazan ako se sve postavi na način na koji smo to uradili. Ispada da je potrebno odrediti put do slike, ponavljanje i poziciju. Naravno, ponavljanje i pozicija nisu uvijek neophodni, ali u svakom slučaju bi bilo ispravnije koristiti stenografsku notaciju za svojstvo. izgleda ovako:
pozadina: #333 url(bg.jpg) bez ponavljanja 50% 50%;
pozadina: #333 url(bg.jpg) bez ponavljanja 50% 50%; |
To jest, prvi korak je snimanje ukupne čvrste boje pozadine, ako je potrebno. Zatim put do slike, ponavljanja i pozicije. Ako neki parametar nije potreban, jednostavno ga izostavite. Slažem se, ovo je mnogo brže i praktičnije, a također značajno smanjujemo naš kod. Općenito, savjetujem vam da uvijek pišete u skraćenom obliku, čak i ako trebate samo naznačiti boju ili sliku.
Kontrola veličine pozadinske slike
Naša trenutna slika nije baš dobra za demonstriranje sljedećeg trika, pa ću uzeti još jedan. Neka bude veličine bloka ili veće. Dakle, zamislite da ste suočeni sa zadatkom da napravite pozadinsku sliku tako da ne ispuni svoj blok u potpunosti. A slika je, na primjer, čak i veća od veličine bloka.
Šta možete učiniti u ovom slučaju? Naravno, najjednostavnija i najrazumnija opcija bila bi jednostavno smanjiti sliku, ali to nije uvijek moguće učiniti. Recimo da leži na serveru i unutra trenutno nema vremena ni prilike da se to smanji. Problem se može riješiti korištenjem svojstva background-size, koje se može nazvati relativno novim i koje vam omogućava da manipulišete veličinom pozadinske slike, ili bilo koje pozadine.
Dakle, moja slika sada zauzima sav prostor u bloku, ali ću joj dati veličinu pozadine:
veličina pozadine: 80% 50%;
veličina pozadine: 80% 50%; |
Opet, prvi parametar postavlja horizontalnu veličinu, drugi - vertikalnu veličinu. Vidimo da je sve ispravno primijenjeno - fotografija je postala 80% širine bloka u širinu i pola u visinu. Ovdje samo trebate napraviti jedno pojašnjenje - postavljanjem veličine u postocima, možete utjecati na proporcije slike. Zato budite oprezni ako želite da ne narušite proporcije.
Kao što možete pretpostaviti, veličina pozadine se također može odrediti u pikselima. Postoje još dvije ključne riječi koje se također mogu koristiti:
Naslovnica – slika će biti skalirana tako da barem s jedne strane u potpunosti ispuni blok.
Sadrži – skalira ga tako da se slika u potpunosti uklopi u blok u svojoj maksimalnoj veličini.
Prednost ovih vrijednosti je u tome što ne mijenjaju proporcije slike, ostavljajući ih istim.
Također biste trebali shvatiti da rastezanje slike može dovesti do pogoršanja njenog kvaliteta. Mogu dati primjer iz života i stvarne prakse layout dizajnera. Svi znaju i razumiju da kada dizajnirate za desktop, morate prilagoditi stranicu širinama glavnog monitora: 1280, 1366, 1920. Ako uzmete pozadinsku sliku veličine, recimo, 1280 x 200, a ne date je veličina pozadine, zatim ekrani sa većom širinom Pojavit će se prazan prostor, slika neće u potpunosti ispuniti širinu.
U 99% slučajeva to ne odgovara web programeru, pa on postavlja background-size: cover tako da se slika uvijek proteže do maksimalne širine prozora. Ovo je dobra tehnika za korištenje, ali sada ćete se suočiti s problemom da korisnici sa širinom ekrana od 1920 piksela mogu vidjeti suboptimalan kvalitet slike.
Da vas podsjetim, protezat će se do svoje maksimalne širine. Shodno tome, kvalitet će se automatski pogoršati. Jedino ispravno rješenje ovdje bi bilo korištenje veće slike – širine 1920 piksela. Tada će na najširim ekranima biti u svojoj prirodnoj veličini, a na ostalim će jednostavno biti postepeno izrezana, ali u isto vrijeme, uz pravilan odabir pozadinske slike, izgled Ovo neće uticati na sajt.
Općenito, ovo je samo jedan primjer kako koristiti znanje koje ste stekli u ovom članku prilikom postavljanja stvarnih izgleda.
Prozirna pozadina koristeći css
Još jedna karakteristika koja se može implementirati sa koristeći css – prozirna pozadina. Odnosno, kroz ovu pozadinu će se moći vidjeti šta je iza toga.
Kao primjer, postavit ću cijelu stranicu kao pozadinu za sliku koju smo koristili ranije u primjerima. Za blok sa identifikatorom bg, na kojem provodimo sve naše eksperimente, postavićemo pozadinu koristeći format podešavanja boje rgba.
Kao što sam ranije rekao, postoji mnogo formata za postavljanje boja u CSS-u. Jedan od njih je rgb, prilično poznat format za one koji rade u njemu grafički uređivači. Piše se ovako: rgb(17, 255, 34);
Prva vrijednost u zagradama je zasićenost crvene, zatim zelene, pa plave. Vrijednost može biti numerička od 0 do 255. Shodno tome, rgba format se ne razlikuje, dodaje se samo još jedan parametar - alfa kanal. Vrijednost može biti od 0 do 1, gdje je 0 puna transparentnost.
Vlad Merzhevich
Zbog specifičnosti web stranica, pozadinske slike igraju značajnu ulogu u rasporedu dokumenata web stranice. Istovremeno, oni su aktivno uključeni u razne stvari, na primjer, automatiziraju proces pričvršćivanja slika na tekst, stvaraju gradijentne prijelaze i, naravno, dodaju pozadinu ispod sadržaja. Ispod su neki aspekti korištenja pozadinskih slika.
Pozadina na web stranici
Postavljanje pozadinske slike na web stranici se tradicionalno odvija kroz pozadinski atribut oznake.
.Ovaj obrazac se ponavlja horizontalno i okomito, ispunjavajući tako cijeli prozor pretraživača. Jasno je da ovdje nema posebnih opcija za kreativnost, pa se okrenimo stilovima i vidimo šta se može učiniti pomoću CSS-a.
CSS ima pet atributa koji kontrolišu pozadinsku sliku: njeno dodavanje, poziciju i ponavljanje. Međutim, svi ovi parametri su zamijenjeni jednim univerzalnim svojstvom, background , koje ćemo koristiti u budućnosti.
Dodavanje slike se dešava postavljanjem adrese slike pomoću ključne riječi url. Za kontrolu ponavljanja slike koriste se argumenti no-repeat, repeat-x (ponovi horizontalno) i repeat-y (repeat vertical). Zahvaljujući tome, možete dobiti web stranicu prikazanu na sl. 1.
Da biste postavili sliku na web stranicu, potrebno je da dodate svojstvo stila pozadine selektoru BODY, kao što je prikazano u primjeru 1.
Primjer 1: Pozadinska slika
U ovom primjeru, grafički target.gif je definiran kao pozadina web stranice bez ponavljanja slike. Kako bi se spriječilo da se slika čvrsto priliježe ivicama pretraživača, pomaknuta je 30 piksela udesno i 20 piksela dolje od prvobitne pozicije.
Ponavljanje šablona
Zbog činjenice da možete postaviti pozadinski uzorak da se ponavlja horizontalno ili vertikalno, dostupno je nekoliko opcija za dizajn web stranica. Na primjer, da biste napravili vertikalnu traku duž lijeve ivice (slika 2), trebat će vam slika prikazana na sl. 3.
Dizajn mora biti takav da se uklapa okomito bez uočljivih šavova, te da čini jedinstvenu cjelinu sa navedenom bojom pozadine web stranice.
Primjer 2 pokazuje kako se kreira takva pozadinska slika, opet koristeći svojstvo background i njegovu repeat-y vrijednost.
Primjer 2. Ponavljanje pozadine okomito
Slično, možete ponoviti pozadinu horizontalno, na primjer, kreiranjem gradijenta i postavljanjem kao pozadinsku sliku (slika 4).
Da biste dobili web stranicu prikazanu na sl. 4, prvo ćete morati napraviti sliku s prijelazom gradijenta. Širina je dovoljna za navođenje 20-40 piksela, a visina slike ovisi o namjeni dokumenta i očekivanoj visini sadržaja web stranice. Ne zaboravite da će veliki crtež povećati veličinu grafičke datoteke. A to će negativno utjecati na njegovu brzinu učitavanja i, u konačnici, dovesti do sporijeg prikaza u pozadini. Za ovaj slučaj je sasvim prikladna slika veličine 30x200 piksela (slika 5).
Primjer 3 prikazuje HTML kod za kreiranje gradijenta pozadine.
Lorem ipsum...
Gradijentni dizajn dobro ide uz blok u jednoj boji, tako da u ovom primjeru dodajemo sloj za prikaz sadržaja web stranice.
Koristeći pozadinsku sliku, možete automatizirati proces dodavanja grafike određenom tekstu, kao što su naslovi. Da biste to učinili, koristite pozadinsko univerzalno svojstvo, koje se primjenjuje na željeni selektor. Vrijednost je putanja do slike i, kako bi se spriječilo njeno ponavljanje, argument zabrane ponavljanja (primjer 4).
Primjer 4: Dodavanje slike
Naslov
Glavni tekst
Kao što je prikazano u ovom primjeru, slika se može pomicati vodoravno i okomito u odnosu na njenu prvobitnu poziciju, po defaultu ovo je gornji lijevi kut blok element. Pomeranje pozadine vam omogućava da pozicionirate sliku u odnosu na tekst na željeni način. Da biste spriječili da se tekst preklapa sa slikom, morate dodati svojstvo padding-left, zbog čega se tekst pomiče udesno za određenu udaljenost. On je u svakom slučaju individualan i obično je jednak širini slike plus željeni razmak između slike i teksta.
Gotovo svaka popularna web stranica ima lijep izgled. Važan dio dizajna web stranice je pozadina, koja se naziva i pozadina, koju svako od nas može kreirati ili mijenjati. U ovom članku ću vam reći kako staviti pozadinu na web stranicu.
Izrada nove pozadine za web stranice
Da biste izvršili zadatak, možete koristiti jednu od 4 metode:
- 1. Pozadina u jednoj boji
- 2. Pozadina s teksturom
- 3. Pozadina koristeći gradijent
- 4. Pozadina sa velike slike
Napravite pozadinu koristeći jednu boju
Da biste kreirali ili promijenili pozadinu stranice, koja se sastoji od jedne boje, trebate otići na datoteku style.css, u kojem pronađite vrijednost - tijelo (odgovorno je za glavno tijelo stranice). Sada morate registrirati funkciju background-color ako nije postojala i naznačiti kod boje. U slučaju kada trebate napraviti bijelu pozadinu za web stranicu, morat ćete napisati sljedeći kod:
boja pozadine: #83C5E9 ; (plava pozadina, kao u primjeru)
Kompletnu listu boja možete pronaći na web stranici - (STM). Da biste promijenili boju, jednostavno promijenite vrijednost nakon dvotočka i uživajte u naporima.
Kreiranje pozadine pomoću teksture
Ova metoda je posebno popularna u posljednje vrijeme, jer vam omogućava da napravite prekrasnu pozadinu za stranicu. Teksture mogu biti jednostavne, ali vrlo lijepe, zbog čega se često koriste. Da biste povezali bilo koju teksturu, potrebno je da je učitate u mapu slika na hostingu na kojem je vaša stranica instalirana. Nakon ovoga trebali biste napisati sljedeći kod:
boja pozadine: #537759;
background-image: url(images/pattern.png);
Ovaj kod sadrži poznati parametar za održavanje boje (zeleno je) i element koji je odgovoran za povezivanje zelene teksture.
Pravljenje pozadine pomoću gradijenta
Svaka slika koja je povezana pomoću css funkcija može se ponoviti i vodoravno i okomito (duž osi X I Y). Ova prilika nam omogućava da kreiramo bilo koju jednostavnu pozadinu za web lokaciju vlastitim rukama. Da biste to učinili, trebate kreirati gradijent širine 1 megapiksela (pogledajte sliku ispod), sačuvati ga kao sliku i prenijeti na svoj hosting. Nakon toga možete napisati potreban kod, i to:
boja pozadine: #83C5E9;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
U ovom setu, po redu prioriteta, nalazi se funkcija odgovorna za boju pozadine koju koristimo za reosiguranje. Nakon toga, parametar koji je odgovoran za povezivanje gradijenta i konačno, funkcija koja je odgovorna za ponavljanje gradijenta duž X ose.
Upotreba velike slike za pozadinu web stranice
Ova metoda je druga po popularnosti, jer vam omogućava da koristite različite slike za stvaranje pozadine. Za implementaciju ove metode potrebno je samo preuzeti velika slika u folder sa slikama web mjesta i napišite sljedeći kod:
boja pozadine: #000000;
background-image: url(slike/naslov slike.jpg);
pozadinski položaj: centar vrh;
background-repeat: bez ponavljanja;
Ako je sve jasno sa prva dva parametra, onda je potrebno pokriti posljednja dva. Treća funkcija vam omogućava da fiksirate sliku u centru stranice, a posljednji parametar blokira njeno ponavljanje kroz cijelu strukturu stranice.
Promjena pozadine na ucoz web stranicama
Te metode kreiranja pozadine za web stranicu mogu se koristiti na različiti sistemi upravljanje sajtovima, ali ne na sajtovima - ucoz. Da biste promijenili pozadinu za ucoz web stranicu, potrebno je da odete na kontrolnu tablu stranice, idite na "Upravljanje dizajnom", a zatim unutra "Uređivanje šablona".
Sada morate da otvorite listu stilova (CSS), pronađite liniju "telo" i parametar "pozadina". Nakon toga, potrebno je da kopirate link, zalijepite ga u svoj internet pretraživač i imat ćete pristup slici koja je bila pozadina.
Da biste koristili novu pozadinu, samo je trebate otpremiti na File manager. Istovremeno, uvjerite se da je naziv nove pozadinske slike isti kao prije promjene. Sačuvajte svoj rad i idite na web stranicu da vidite obavljeni posao.
Promjena pozadine stranice u HTML
Ako želite da napravite pozadinu na html stranici pomoću slike, jednostavno unesite red u kod:
A ako želite napraviti pozadinu stranice koristeći boju, tada bi linija trebala izgledati ovako:
Ovim je naša priča završena. Sada znate kako napraviti pozadinu za web stranicu. Srećni projekti!
Moderni pretraživači vam omogućavaju da elementu dodate proizvoljan broj pozadinskih slika, navodeći parametre svake pozadine odvojene zarezima. Dovoljno je koristiti svojstvo univerzalne pozadine i navesti jednu pozadinu za nju prvo, a drugu odvojenu zarezom.
Kako rastegnuti pozadinu na punu širinu prozora?
Da biste skalirali pozadinu, koristite svojstvo background-size, postavite njegovu vrijednost na 100%, tada će pozadina zauzeti cijelu širinu prozora pretraživača. Za starije verzije pretraživača, trebali biste koristiti određena svojstva s prefiksima, kao što je prikazano u primjeru 1.
Kako dodati pozadinsku sliku na web stranicu?
Da biste dodali pozadinsku sliku na web stranicu, postavite putanju do slike unutar vrijednosti URL-a svojstva stila pozadine, koja se zauzvrat dodaje izborniku tijela.
Da li je moguće napraviti animiranu pozadinu?
Animacija je prilično moćna tehnika koja može oživjeti svaki dokument, pa ne čudi činjenica da je Flash tehnologija, koja na web stranice dodaje crtane filmove, i to interaktivne, postala izuzetno popularna. Grafički format GIF takođe podržava jednostavnu animaciju uzastopnom promenom kadrova. Dakle, koristeći sliku u ovom formatu, moguće je animirati ne samo pojedinačne slike, već i pozadinu web stranice ili određenog elementa.
Prvo ćete morati kreirati animiranu sliku u GIF formatu, za koju možete koristiti program Adobe Photoshop ili drugog pogodnog za ovu svrhu. Postoje i biblioteke gotovih animiranih datoteka koje se mogu koristiti kao pozadinska slika. Zatim se slika dodaje kao pozadina koristeći svojstvo stila pozadine, kao što je prikazano u primjeru 1.
Kako postaviti pozadinu u donjem desnom uglu stranice?
Za kontrolu položaja pozadinske slike na stranici koristi se svojstvo stila pozadine, ono istovremeno postavlja horizontalne i vertikalne koordinate slike. Da biste otkazali ponavljanje pozadinske slike, koristite svojstvo background-position sa vrijednošću bez ponavljanja.
Kako učiniti da se pozadina ne ponavlja?
Podrazumevano, pozadinska slika se ponavlja vodoravno i okomito, formirajući mozaik preko cijelog polja web stranice. Međutim, ovo pozadinsko ponašanje nije uvijek potrebno, posebno u slučaju jedne slike pomoć će doći vrijednost bez ponavljanja dodana svojstvu stila pozadine.
Kako mogu učiniti da se pozadina ponavlja samo okomito?
Ponavljanje u pozadini obično je potrebno za stvaranje ukrasnih linija ili preliva koji su vezani za visinu elementa web stranice ili prozora. U takvim slučajevima, vertikalno ponavljanje pozadine daje dosljednu sliku, bez obzira na veličinu elemenata. Samo u početku trebate biti sigurni da se pozadinska slika ponavlja bez šavova.
Kratke informacije
CSS verzije
Vrijednosti
url Vrijednost je put do grafički fajl, koji je specificiran unutar url() konstrukcije. Put do datoteke može biti napisan u navodnicima (dvostrukim ili jednostrukim) ili bez njih.none Onemogućuje pozadinsku sliku za element.
HTML5 CSS2.1 IE Cr Op Sa Fx
pozadinska slika
Objektni model
document.getElementById("elementID ").style.backgroundImage Pregledači
Internet Explorer
do i uključujući verziju 7.0, primjenjuje pozadinu na unutrašnjost ivice elementa koji ima postavljeno svojstvo hasLayout. Ako element nema hasLayout , svojstvo background-image će poštovati granice elementa, kako je navedeno u specifikaciji. Razlika u prikazu bit će primjetna ako su granice isprekidane ili tačkaste, a ne pune.
Ako je element postavljen na pomicanje ili auto, Internet Explorer 8 će imati vertikalno kašnjenje od jednog piksela kada se pozadina pomiče.
none Onemogućuje pozadinsku sliku za element.
| 1 | 2 | 3 |
), zatim ga Chrome, Safari, iOS prikazuju ne onako kako je propisano specifikacijom, odnosno za svaku ćeliju posebno. Dok bi pretraživač trebao prikazati čvrstu pozadinu za cijeli red. Primjer 2 pokazuje kod koji demonstrira grešku. Pozadina za TR Rezultat ovaj primjer V Chrome pretraživač prikazano na sl. 1.
Internet Browser
Explorer, Opera i Firefox ispravno prikazuju pozadinu za liniju (slika 2).