CSS pozadina. Kompletan vodič. Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, privitak) - sve za postavljanje boje pozadine ili pozadinske slike Html elemenata Kako postaviti boju pozadine u css

Pozdrav, dragi čitatelji bloga. Danas ćemo pogledati pet CSS pravila koja vam omogućuju postavljanje pozadine za bilo koji element u Html-u - položaj pozadine (slika, ponavljanje, boja, privitak). Pa, nemojmo također zaboraviti spomenuti pravilo pozadinskog spoja.

U tome nema ništa komplicirano, ali postoje određene suptilnosti i nijanse koje morate znati i već gotov predložak(zapamtite o, što će vam pomoći otkriti sve detalje bilo kojeg dizajna).

Dopustite mi da vas još jednom podsjetim da je ovaj članak dio serije i da bi bilo najbolje početi proučavati stilsko označavanje od početka, točnije s člankom o tome što je CSS i za što se koristi, a zatim slijediti navedenim redoslijedom u priručniku. Iako, u svakom slučaju, to ovisi o vama, ali sada razgovarajmo o postavljanju pozadine.

Boja, boja pozadine i slika pozadine

Pogledajmo prvo kako postaviti HTML boja korištenje elemenata Css pravila boja. Zapravo, ovdje je sve jednostavno. Sintaksa je potpuno normalna i možete postaviti boju u skladu s načinom na koji je to učinjeno u jeziku za označavanje hiperteksta. Kao što se sjećate, postavljeno nakon znaka hash (hash - "#fe35a3") ili pomoću tri znamenke, ako se prva podudara s vrijednošću druge, treća s četvrtom, odnosno peta sa šestom ( kod boje “#aa33ff” može se ukratko napisati kao "a3f").

Također boje u Html i CSS kod može se predstaviti riječima (na primjer, "crveno"), ali najčešće se koristi heksadecimalni kod:

Boja:#303

Kao primjer, obojio sam ovaj mali paragraf istom bojom kao gore (#303). Sada se malo razlikuje od boje svih ostalih odlomaka (tamnije), koja je postavljena na #555 u CSS datoteci koju koristim WordPress teme. Ali postavljanje boje pomoću boje prilično je jednostavno, ali s pozadinom će biti malo kompliciranije.

Tako, za pozadinu u CSS-u Postoji pet pravila koja se po želji mogu spojiti u jedno. Da biste ih vidjeli, možete otići na trenutnu W3C specifikacijsku stranicu i potražiti bilo što s riječju Pozadina:

1. boja pozadine - pomoću ovog pravila postavljate boju pozadine za bilo koji Html element. Možete koristiti šifru ili naziv nijanse, tj. sve je potpuno isto kao kad se koristila boja.

pozadinska slika - s njom možete koristiti sliku kao pozadinu (ali svakako pročitajte o tome, jer će teške slike usporiti učitavanje stranica), čiji će put biti naznačen u url () funkcionalnosti.

Ako pogledate specifikaciju vidjet ćete to zadana boja pozadine bilo koji element će biti proziran (zadana vrijednost pravila je “background-color:transparent”). Istina, u elementima neće biti transparentan prema zadanim postavkama, jer To su elementi sustava i sve u vezi njih je drugačije i razlikuje se od običnih oznaka hipertekstualnog jezika za označavanje.

Boja u boji pozadine postavljena je kao standardna (šest ili tri znamenke heksadecimalnog koda ili riječ):

Boja pozadine:#FEFCDE

Na primjer, pozadina ovog odlomka određena je pomoću boje pozadine s kodom boje koji je dat neposredno iznad.

Sva ostala četiri CSS pravila odnosit će se samo na pozadinsku sliku koja se može postaviti za bilo koji Html element i po želji precizno pozicionirati. Koja će se grafička datoteka koristiti može se odrediti pomoću pozadinska slika.

Ako pogledate specifikaciju označnog jezika, vidjet ćete da je pozadinska slika prema zadanoj postavci "none" (tj. slika se ne koristi za pozadinu). Pa, ako vam ovo i dalje treba, tada ćete u funkciji url() morati naznačiti put do njega:

Pozadinska slika:url(https://site/image/comment_top_focus.gif);

Na primjer, za ovaj odlomak koristio sam grafičku datoteku s pozadinom, čiji je put opisan gore. Vidite da je cijelo područje dodijeljeno ovom odlomku prekriveno slikom koja se ponavlja, a koja u izvorniku izgleda ovako:

Oni. kada koristite samo jedno pravilo pozadinske slike koje označava stazu do grafičke datoteke, ista će se slika umnožiti i okomito i vodoravno sve dok ne pokrije cijelo područje dodijeljeno na web stranici za ovaj specifični Html element (u našem primjeru to je bilo odlomak). Zašto se ovo događa?

Background-repeat - ponavljanje pozadinske slike

Da, jer nismo naveli nikakvu vrijednost za CSS pravilo pozadinsko ponavljanje, što znači da će se za njega koristiti zadana vrijednost. Gledajući specifikaciju, otkrivamo da ova vrijednost odgovara "ponovi" (ponovi sliku na svim osima). Odgovor je došao sam po sebi.

Stoga, s pozadinskim ponavljanjem možemo upravljanje ponavljanjem pozadinske slike. Ovo pravilo može imati samo četiri značenja:




Background-position - pozadinsko pozicioniranje

Sada se postavlja pitanje: je li moguće maknuti pozadinsku sliku od gornjeg lijevog kuta područja koje ograničava veličinu elementa. Naravno da možete, a za tu svrhu postoji posebno pravilo. pozadina-položaj:



Gledajući CSS specifikaciju, postaje jasno zašto je pozadinska slika prema zadanim postavkama pritisnuta točno na gornji lijevi rub područja Html elementa. Budući da je vrijednost "0% 0%" zadana vrijednost za pravilo položaja pozadine.

Pa, kada ovo pravilo nije eksplicitno postavljeno za element (kao u našem slučaju), tada preglednik odabire njegovu vrijednost, koja je prihvaćena u specifikaciji prema zadanim postavkama (imajte na umu da se koordinatne osi u CSS-u prikazuju točno od gornjeg lijevog ruba elementa površine).

Iz specifikacije je također jasno da za postavljanje pozadinske slike pomoću pozadinskog položaja možete koristiti i relativne (postotke) i apsolutne vrijednosti (na primjer, ). Pa, također možete koristiti riječi koje će odgovarati određenim digitalnim vrijednostima. Ali prvo o svemu.

Prilikom postavljanja položaja pozadinske slike koristeći apsolutne jedinice u pozadinskom položaju za određivanje njegovog konačnog položaja koristi se sljedeće načelo:

Oni. preglednik će izračunati navedene pomake duž X i Y osi od ishodišta područja u kojem je objekt pozicioniran do ishodišta same slike. Na primjer, u ovom odlomku postavio sam pozadinsku sliku putem položaja pozadine koristeći sljedeća CSS pravila:

Pozadinska slika:url(https://site/image/logo.png); pozadinsko ponavljanje: bez ponavljanja; background-position:400px 25px;

Imajte na umu da će u ovom slučaju biti poravnat sa središtem područja za gledanje, a ne sa središtem područja dodijeljenog ovim paragrafima. Jasno je da se u stvarnosti takvo postavljanje pozadinske slike vjerojatno neće koristiti.

Međutim, ako postavite fiksni položaj pozadine za elemente kao što su Body ili Html (tj. u oznakama koje pokrivaju cijelu web-stranicu), ta će slika uvijek biti vidljiva u okviru za prikaz i to je upravo upotreba CSS pozadinskog privitka nekretnina u modernom blokovskom rasporedu.

Ima li još prefabricirano pravilo Pozadina, koji vam omogućuje kombiniranje svih pet gore opisanih pravila u jednoj bočici. Štoviše, vrijednosti za svih pet u kombiniranoj verziji mogu se koristiti bilo kojim redoslijedom i u bilo kojoj količini (jedinstvene su i preglednik ih neće miješati jedne s drugima). Sve što izričito ne navedete preglednik će pretpostaviti kao zadanu vrijednost.

Png) bez ponavljanja 50%;

Primjer pravila montažnih objekata primijenjen je na ovaj odlomak radi jasnoće. Nije ispalo lijepo, ali nije to glavno. Ovaj odlomak koristi neobičnu žutu pozadinu, a također koristi sliku Liveinternet logotipa, poravnatog u sredini odlomka. Jer Ako pravilu pozadinskog privitka nije dana nikakva vrijednost, koristi se vrijednost pomicanja (zadana).

Ako za neki element želite postaviti samo ispunu bojom i ne zamarati se pozadinskom slikom, umjesto toga možete učiniti ovo:

Boja pozadine:#FEFCDE

pisati:

Pozadina: #FEFCDE

Zato što će sve druge vrijednosti prefab pravila biti preuzete prema zadanim postavkama, a to je ono što vam je trebalo.

Sretno ti! Vidimo se uskoro na stranicama bloga

Moglo bi vas zanimati

Stil popisa (vrsta, slika, položaj) - Css pravila za prilagodbu izgleda popisa u Html kodu Kako konfigurirati izmjeničnu boju pozadine redaka tablica, popisa i drugih Html elemenata na web mjestu pomoću pseudoklase nth-child
Položaj (apsolutni, relativni i fiksni) - metode Html pozicioniranje elementi u CSS-u (pravila lijevo, desno, gore i dolje)
Float i clear u CSS-u - alati za blok raspored
Pozicioniranje pomoću Z-indeksa i pravila CSS kursora za promjenu kursora miša
Padding, Margin i Border - postavite unutarnje i margine, kao i okviri za sve strane (gore, dole, lijevo, desno)
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza Html elemenata na web stranici
Prioriteti u CSS-u i njihovo povećanje zbog Važnog, kombinacije i grupiranja selektora, korisničkih i autorskih stilova
CSS - što je to, kako se povezuju kaskadni listovi stilova HTML kôd koristeći Stil i Link
Selektori oznaka, klasa, Id i univerzalni selektori, kao i selektori atributa u modernom CSS-u

Od autora: Pozdrav svima. Boje pozadine i slike igraju veliku ulogu u web dizajnu jer vam omogućuju da dizajnirate sve elemente na privlačniji način. Danas ćemo pogledati kako napraviti pozadinu u HTML-u.

Je li moguće koristiti HTML za postavljanje pozadine?

Odmah ću reći da ne. Općenito, html nije stvoren za dizajniranje web stranica. Samo je vrlo nezgodno. Na primjer, postoji atribut bgcolor, s kojim možete postaviti boju pozadine, ali to je vrlo nezgodno.

U skladu s tim, koristit ćemo Cascading Style Sheets (CSS). Postoji mnogo više mogućnosti za postavljanje pozadine. Danas ćemo pogledati one najosnovnije.

Kako postaviti pozadinu pomoću css-a?

Dakle, prije svega morate odlučiti na koji element želite postaviti pozadinu. Odnosno, treba pronaći selektora kojem ćemo napisati pravilo. Na primjer, ako trebate postaviti pozadinu za cijelu stranicu kao cjelinu, to možete učiniti putem izbornika tijela, a za sve blokove putem izbornika div. Pa itd. Pozadina može i treba biti vezana za bilo koje druge selektore: stilske klase, identifikatore itd.

Nakon što ste se odlučili za selektor potrebno je napisati naziv same nekretnine. Da biste postavili boju pozadine (tj. punu boju, a ne gradijent ili sliku), koristite svojstvo background-color. Nakon toga morate staviti dvotočku i napisati samu boju. To se može učiniti na različite načine. Na primjer, korištenje ključnih riječi, hex koda, rgb, rgba, hsl formata. Bilo koja metoda će poslužiti.

Najčešće korištena metoda 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 cijele web stranice.

tijelo (boja pozadine: #D4E6B3; )

Ovaj kod treba umetnuti u odjeljak zaglavlje. Važno je da su datoteke u istoj mapi.

Slika kao pozadina

Koristit ću malu ikonu kao sliku. html jezik:

Kreirajmo prazan blok s identifikatorom:

Dajmo mu eksplicitne dimenzije i pozadinu:

#bg( širina: 400px; visina: 250px; pozadinska 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 što se dogodilo:

Da biste odredili sliku, morate pisati iza dvotačke ključna riječ url, a zatim u zagradama označite put do datoteke. U ovom slučaju, staza je određena na temelju činjenice da je slika u istoj mapi kao i html dokument. Također morate odrediti format slike.

Ako ste to učinili, a pozadina se i dalje ne prikazuje u bloku, ponovno provjerite jeste li ispravno napisali naziv slike, jesu li putanja i ekstenzija ispravno postavljeni. Ovo su najviše uobičajeni razlozi da se pozadina jednostavno ne pojavljuje jer preglednik ne može pronaći sliku.

Ali jeste li primijetili jednu stvar? Preglednik je uzeo i umnožio sliku kroz cijeli blok. Dakle, samo da znate, ovo je zadano ponašanje pozadinskih slika - ponavljaju se okomito i vodoravno sve dok mogu stati u blok. Ovim ponašanjem možete lako kontrolirati. Da biste to učinili, upotrijebite svojstvo pozadinskog ponavljanja koje ima 4 glavne vrijednosti:

Ponavljanje – zadana vrijednost, slika se ponavlja s obje strane;

Repeat-x – ponavlja samo na osi x;

Repeat-y – ponavlja se samo duž y osi;

Bez ponavljanja – uopće se ne ponavlja;

Možete napisati svaku vrijednost i vidjeti što će se dogoditi. Napisat ću to ovako:

pozadinsko ponavljanje: ponavljanje-x;

Sada ponovite samo vodoravno. Ako postavite bez ponavljanja, tada će biti samo jedna slika.

Super, možemo završiti ovo sada, budući da ovo osnovne sposobnosti raditi s pozadinom, ali pokazat ću vam još 2 svojstva koja vam omogućuju veću kontrolu.

Ponavljanjem su dizajneri izgleda mogli stvoriti pozadinske teksture i gradijente pomoću jedne male slike. Može biti 30 puta 10 piksela ili čak manji. Ili možda malo više. Slika je bila takva da kada se ponavljala s jedne ili čak obje strane, nisu bili vidljivi nikakvi prijelazi, tako da je rezultat bila jedna bešavna 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 sigurno govoriti kasnije.

Položaj u pozadini

Prema zadanim postavkama, pozadinska slika, osim ako nije postavljena na ponavljanje, bit će u gornjem lijevom kutu svog bloka. Ali položaj se može lako promijeniti korištenjem svojstva background-position.

Možete ga postaviti na različite načine. Jedna od opcija je jednostavno označiti strane na kojima bi se slika trebala nalaziti:

položaj pozadine: desno gore;

To jest, okomito sve ostaje isto: pozadinska slika nalazi se na vrhu, ali vodoravno smo promijenili stranu udesno, odnosno desno. Drugi način postavljanja pozicije je postotak. U ovom slučaju, odbrojavanje počinje u svakom slučaju od gornjeg lijevog kuta. 100% - cijeli blok. Dakle, da bismo sliku postavili točno u središte, pišemo je ovako:

položaj pozadine: 50% 50%;

Upamtite jednu važnu stvar kod pozicioniranja – prvi parametar je uvijek horizontalni položaj, a drugi okomiti položaj. Dakle, ako vidite vrijednost od 80% 20%, tada možete odmah zaključiti da će pozadinska slika biti pomaknuta dosta udesno, ali neće ići puno dolje.

I na kraju, možete odrediti položaj u pikselima. Sve je isto, samo će umjesto % biti px. U nekim slučajevima takvo pozicioniranje može biti potrebno.

Stenografski zapis

Složite se da kod ispada prilično glomazan ako je sve postavljeno onako kako smo mi napravili. Ispada da treba odrediti put do slike, ponavljanje i položaj. Naravno, ponavljanje i pozicija nisu uvijek potrebni, ali u svakom slučaju bilo bi ispravnije koristiti stenografski zapis za svojstvo. Ovako izgleda:

pozadina: #333 url(bg.jpg) bez ponavljanja 50% 50%;

To jest, prvi korak je snimanje cjelokupne pune boje pozadine, ako je potrebno. Zatim put do slike, ponavljanje i pozicija. Ako neki parametar nije potreban, jednostavno ga izostavite. Slažem se, ovo je puno 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 demonstraciju sljedećeg trika, pa ću uzeti drugu. Neka bude veličine bloka ili veće. Dakle, zamislite da ste suočeni sa zadatkom da napravite pozadinsku sliku tako da ne ispuni cijeli blok. A slika je, na primjer, čak i veća od veličine bloka.

Što 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 ovaj trenutak nema vremena ni prilike da se smanji. Problem se može riješiti korištenjem svojstva veličine pozadine, koje se može nazvati relativno novim i koje vam omogućuje da manipulirate veličinom pozadinske slike, pa čak i svake pozadine.

Dakle, moja slika sada zauzima sav prostor u bloku, ali ću joj dati veličinu pozadine:

veličina pozadine: 80% 50%;

Opet, prvi parametar postavlja vodoravnu veličinu, drugi - okomitu veličinu. Vidimo da je sve ispravno primijenjeno - fotografija je postala 80% širine bloka u širini i pola u visini. Ovdje samo trebate napraviti jedno pojašnjenje - postavljanjem veličine u postotku možete utjecati na proporcije slike. Stoga budite oprezni ako ne želite poremetiti proporcije.

Kao što možete pogoditi, veličina pozadine također se 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 potpuno ispuni blok.

Sadrži – skalira je tako da slika u potpunosti stane u blok pri maksimalnoj veličini.

Prednost ovih vrijednosti je u tome što ne mijenjaju proporcije slike, ostavljajući ih istima.

Također biste trebali shvatiti da rastezanje slike može dovesti do pogoršanja njezine kvalitete. Mogu dati primjer iz života i stvarne prakse layout dizajnera. Svi znaju i razumiju da kada dizajnirate za stolna računala, morate prilagoditi web mjesto glavnim širinama monitora: 1280, 1366, 1920. Ako uzmete pozadinsku sliku veličine, recimo, 1280 x 200, i ne dajete veličinu pozadine, zatim zasloni veće širine. Pojavit će se prazan prostor, slika neće u potpunosti ispuniti širinu.

U 99% slučajeva to ne odgovara web developeru, pa postavlja background-size: cover tako da se slika uvijek rasteže do maksimalne širine prozora. Ovo je dobra tehnika za korištenje, ali sada ćete se suočiti s problemom da korisnici sa širinom zaslona od 1920 piksela mogu vidjeti sliku ispod optimalne kvalitete.

Da vas podsjetim, rastegnut će se do maksimalne širine. Sukladno tome, kvaliteta će se automatski pogoršati. Samo prava odluka ovdje će u početku koristiti veću sliku – široku 1920 piksela. Tada će na najširim zaslonima biti u svojoj prirodnoj veličini, a na ostalima će se jednostavno postupno izrezati, no istovremeno uz pravilan odabir pozadinske slike, izgled To neće utjecati na web mjesto.

Općenito, ovo je samo 1 primjer kako koristiti znanje koje ste stekli u ovom članku prilikom postavljanja pravih izgleda.

Prozirna pozadina pomoću css-a

Još jedna značajka koja se može implementirati s koristeći css– polu prozirna pozadina. Odnosno, kroz ovu pozadinu moći će se vidjeti što je iza nje.

Kao primjer, postavit ću cijelu stranicu kao pozadinu slike koju smo ranije koristili u primjerima. Za blok s identifikatorom bg, na kojem provodimo sve naše eksperimente, postavit ćemo pozadinu pomoću rgba formata postavki boja.

Kao što sam ranije rekao, postoji mnogo formata za postavljanje boja u CSS-u. Jedan od njih je rgb, prilično dobro poznat format onima koji rade u njemu grafički urednici. Zapisuje 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. Sukladno tome, rgba format se ne razlikuje, samo je dodan još jedan parametar - alfa kanal. Vrijednost može biti od 0 do 1, gdje je 0 potpuna prozirnost.

kratka informacija

CSS verzije

Vrijednosti

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektni model

document.getElementById("elementID ").style.backgroundImage

Preglednici

Internet Explorer do inačice 7.0 uključivo, primjenjuje pozadinu na unutarnju granicu elementa koji ima postavljeno svojstvo hasLayout. Ako element nema hasLayout, svojstvo background-image poštivat će granice elementa, kao što je navedeno u specifikaciji. Razlika u prikazu bit će primjetna ako su obrubi isprekidani ili točkasti, a ne puni.

Ako je element postavljen na pomicanje ili auto , Internet Explorer 8 će imati okomitu odgodu od jednog piksela kada se pozadina pomiče.

Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

Ako je pozadina postavljena za red tablice (tag ), onda ga Chrome, Safari, iOS prikazuju ne onako kako je propisano specifikacijom, odnosno za svaku ćeliju posebno. Dok bi preglednik trebao prikazati čvrstu pozadinu za cijeli red. Primjer 2 prikazuje kod koji pokazuje pogrešku.

HTML5 CSS2.1 IE Cr Op Sa Fx

Proizlaziti ovaj primjer V Chrome preglednik prikazano na sl. 1. Internetski preglednik Explorer, Opera i Firefox ispravno prikazuju pozadinu linije (slika 2).

Riža. 1. Ponovite pozadinu za svaku ćeliju

Riža. 2. Pozadina za cijelu liniju

Mislim da nema nijedne lokacije na kojoj se nekretnina ne koristi CSS pozadina. Čini se da što može biti jednostavnije od ove nekretnine? Ali ne, njegove su mogućnosti puno šire od uobičajenog dodjeljivanja slike ili boje kao pozadine stranice. Neke će stvari biti poznate, dok će druge mnogima vjerojatno biti nove. U svakom slučaju, bit će korisno znati temeljito kako pozadina radi.

CSS3 je donio puno novih stvari u svojstvo, kao što je transparentnost i dodjeljivanje nekoliko slika kao pozadine, ali o tome ćemo govoriti u nastavku, ali prvo ćemo pogledati osnove svojstva pozadina.

boja pozadine

Više sam nego siguran da ste već više puta dodijelili boju pozadine. To se može učiniti korištenjem nekoliko vrsta zapisa: obični (koristi se naziv boje), heksadecimalni ili RGB zapis. Svaka vrsta je ekvivalentna, koristite onu koja vam se najviše sviđa. Pokušavam koristiti najkraću opciju, a radi lakše percepcije, rezultirajuća stilska datoteka je malo manja.

P (boja-pozadine: crvena;) p (boja-pozadine: #f00;) p (boja-pozadine: #ff0000;) p (boja-pozadine: rgb(255, 0, 0;))

CSS3 podržava prozirnost, pa je možemo dodati našoj boji, na primjer ovako:

P (boja pozadine: rgba(255, 0, 0, 0,5);)

Zadnja brojka postavlja prozirnost na 50%. Možete postaviti vrijednost prozirnosti od 0 (potpuno prozirna pozadina) do 1 (potpuno neprozirna).

pozadinska slika

Ovo se svojstvo također koristi vrlo često; omogućuje vam dodijeljivanje slike pozadini. CSS3 je dodao mogućnost dodjele više slika pozadini, od kojih svaka stvara svoj sloj, tako da se svaka sljedeća preklapa s prethodnom. Zašto bi ovo moglo biti korisno? Sve je vrlo jednostavno - recimo da trebate uvrnuti male ukrase u svaki kut stranice. S obzirom na više-manje gumasti izgled, korištenje jedne slike nije opcija. Dakle, napravimo 4 "layera", svaku sliku premjestimo u svoj kut i to je sve, problem je riješen

Tijelo (pozadinska slika: url("slika1"), url("slika2"), url("slika3"))

Ako trebate dodijeliti jednu sliku pozadini, ostavljamo samo prvu u kodu, mislim da je to razumljivo.
Kada koristite bilo koju sliku kao pozadinu, zapamtite dva pravila:

• postavite kontrastnu boju pozadine u slučaju da korisnik iz nekog razloga ne vidi sliku. Može jednostavno isključiti prikaz slika, štedeći promet.
• nemojte koristiti pozadinsku sliku za prenošenje bilo čega važna informacija. Iz gore navedenih razloga, korisnik ga možda neće vidjeti.

Podrška za više pozadinskih slika prilično je opsežna. Svi preglednici, čak i IE8, podržavaju ovo svojstvo.