Kako poravnati pozadinsku sliku udesno. Šta je sa kompatibilnošću?

U CSS 2, nemoguće je dodati dvije pozadine jednom elementu u isto vrijeme, tako da morate ugnijezditi jedan element unutar drugog i svakom dati svoju sliku pozadine. Za složene rasporede takvih priloga se ponekad može izbrojati na desetak. Jasno je da takvo gomilanje ne vodi ničemu dobrom, ali šta učiniti? Ispostavilo se da postoji nešto! U CSS 3 možete dodati više pozadinske slike za bilo koji element. Dakle, uzimamo blok crtež (slika 1), isečemo ga na komade i počinjemo da ga testiramo u pretraživačima.

Rice. 1. Blokirajte za stranicu

Radi jednostavnosti, uzet ću širinu bloka fiksna veličina, a visina će se protezati ovisno o sadržaju. Gornji i donji dio su jasno vidljivi na crtežu, izrezao sam ih u editoru i presavio u slojeve u zasebnom fajlu. Srednji dio mora biti odabran tako da se ponavlja okomito bez šavova. Dizajn ima dobro definiran obrazac koji se ponavlja, tako da ne bi trebalo biti poteškoća u njegovom naglašavanju. Kopiram i zalijepim na prethodne fragmente. Rezultat će biti ovakva slika (slika 2).

Rice. 2. Pripremljene slike

U principu, svaki fragment možete sačuvati kao zaseban fajl, ali CSS sprite (tzv. tehnologija lijepljenja nekoliko slika u jednu) imaju niz prednosti. Prvo, smanjen je broj zahtjeva prema serveru zbog smanjenja broja datoteka, a drugo, slike se ukupno brže učitavaju i prikazuju.

Samu pozadinu prikazuje svojstvo background, koje također specificira koordinate željenog fragmenta. Parametri svake pozadine su navedeni odvojeni zarezima i in u ovom slučaju njihov red je bitan. Treba mi gornji dio i Donji dio blokovi se nisu preklapali, pa sam ih stavio na prvo mjesto (primjer 1).

Primjer 1. Nekoliko pozadinske slike

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

Prva pozadina prikazuje gornju granicu bloka, druga pozadina - donju, a treća - okomite ivice.

Provjeravamo u pretraživačima. Internet Explorer 8 nije prikazao nijednu sliku, ostali pretraživači (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) su ispravno prikazali okvir (slika 3).

Rice. 3. Prikaz okvira u Safari pretraživaču

Korištenje više pozadina čini situaciju mnogo lakšom za programere, posebno kada postavljaju blokove. Ostala je samo jedna sitnica. Neophodno je da IE 6–8 pretraživač prestane da postoji.

• Tutorial

Već smo se dotakli mogućnosti modula CSS3 Backgrounds and Borders, gledajući rad sa sjenama (). Danas ćemo pričati malo o još jednom zanimljiva prilika- korištenje više slika u pozadini.

Kompozicija pozadine

Postoji mnogo razloga zašto biste možda željeli komponirati više slika u pozadini, od kojih su najvažniji:

• ušteda prometa na veličini slika, ako pojedinačne slike ukupno teže manje od slike sa spljoštenim slojevima, i
• potreba za neovisnim ponašanjem pojedinačnih slojeva, na primjer, pri implementaciji paralaksnih efekata.

Možda postoje i drugi razumni razlozi :)

Klasičan pristup

Dakle, moramo postaviti nekoliko pozadinskih slika jednu na drugu. Kako se ovaj problem obično rješava? Vrlo jednostavno: za svaku pozadinska slika kreira se blok i pripisuje mu se odgovarajuća pozadinska slika. Blokovi su ili ugniježđeni jedan unutar drugog ili postavljeni u red s odgovarajućim pravilima pozicioniranja. Evo jednostavnog primjera:

Blok sa klasom "fishing" unutar "sirena" je samo u svrhu demonstracije.

Sada nekoliko stilova:
.sample1 .sea, .sample1 .sirena, .sample1 .fishing (visina:300px; širina:480px; pozicija: relativna; ) .sample1 .sea (pozadina: url(media/sea.png) repeat-x na vrhu lijevo; ) .sample1 .sirena (pozadina: url(media/mermaid.svg) repeat-x dolje lijevo; ) .sample1 .fish (pozadina: url(media/fish.svg) bez ponavljanja; visina:70px; širina:100px; lijevo: 30px; gore: 90px; pozicija: apsolutna; ) .sample1 .fishing (pozadina: url(media/fishing.svg) bez ponavljanja gore desno 10px; )

rezultat:

U ovom primjeru postoje tri ugniježđene pozadine i jedan blok sa ribom koji se nalazi pored blokova „pozadine“. U teoriji, ribe se mogu pomicati, na primjer, sa koristeći JavaScript ili CSS3 tranzicije/animacije.

Usput, ovaj primjer za ".fishing" koristi novu sintaksu za pozicioniranje u pozadini, također definiranu u CSS3:
pozadina: url(media/fishing.svg) bez ponavljanja gore desno 10px;
Trenutno je podržan u IE9+ i Operi 11+, ali nije podržan u Firefoxu 10 i Chromeu 16. Tako da korisnici posljednja dva pretraživača još neće moći uhvatiti ribu.

Više pozadina

Dolazi u pomoć nova opcija, dodat u CSS3, je mogućnost definiranja više pozadinskih slika za jedan element. izgleda ovako:

I odgovarajući stilovi:
.sample2 .sea (visina:300px; širina:480px; pozicija: relativna; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); background-position: gore desno 10px, dolje lijevo, gore lijevo; background-repeat: no-repeat, repeat-x, repeat-x ; ) .sample2 .fish ( background: url("media/fish.svg ") bez ponavljanja; visina:70px; širina:100px; lijevo: 30px; gore: 90px; pozicija: apsolutna; )
Da biste definirali više slika, morate koristiti pravilo pozadinske slike, navodeći pojedinačne slike odvojene zarezima. Dodatna pravila, takođe kao lista, možete postaviti pozicioniranje, ponavljanja i druge parametre za svaku sliku. Obratite pažnju na redosled kojim su slike navedene: slojevi su izlistani s leva na desno od vrha do kraja.

Rezultat je potpuno isti:

Jedno pravilo

Ako ribu nije potrebno odvajati u poseban blok za naknadne manipulacije, cijela slika se može prepisati jednim jednostavno pravilo:

Stilovi:
.sample3 .sea (visina:300px; širina:480px; pozicija: relativna; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); background-position: gore desno 10px, dolje lijevo, 30px 90px, gore lijevo; background-repeat: no-repeat, repeat-x ; )

Sliku rezultata neću pokazivati ​​- vjerujte mi, poklapa se sa dvije slike iznad. Ali opet obratite pažnju na stilove, posebno na „background-repeat“ - prema specifikaciji, ako nedostaje dio liste na kraju, pretraživač bi trebao ponoviti specificirana lista potreban broj puta da odgovara broju slika na listi.

U ovom slučaju, to je ekvivalentno ovom opisu:
ponavljanje u pozadini: bez ponavljanja, ponavljanje-x, bez ponavljanja, ponavljanje-x;

Čak i kraće

Ako se sjećate CSS 2.1, definirao je mogućnost opisivanja pozadinskih slika u kratkom obliku. Šta kažete na više slika? Ovo je također moguće:

Sample4 .sea (visina:300px; širina:480px; pozicija: relativna; pozadina: url("media/fishing.svg") gore desno 10px bez ponavljanja, url("media/mermaid.svg") dolje lijevo repeat-x , url("media/fish.svg") 30px 90px bez ponavljanja, url("media/sea.png") repeat-x; )

Ali imajte na umu da sada ne možete jednostavno preskočiti vrijednosti (osim ako se ne poklapaju sa zadanom vrijednošću). Usput, ako želite postaviti boju pozadinske slike, to morate učiniti u posljednjem sloju.

Dinamične slike

Ako je kompozicija statična ili dinamična najviše ovisno o veličini spremnika, tada više pozadina očigledno pojednostavljuje dizajn stranice. Ali šta ako trebate raditi sa pojedinačnim elementima kompozicije nezavisno od javascripta (pomeranje, pomeranje, itd.)?

Usput, evo primjera iz života - tema s maslačkom u Yandexu:


Ako pogledate kod, vidjet ćete nešto poput ovoga:

...

Blokovi sa klasama "b-fluff-bg", "b-fluff__cloud" i "b-fluff__item" sadrže pozadinske slike koje se međusobno preklapaju. Štaviše, pozadina sa oblacima stalno se pomiče, a maslačak lete preko ekrana.

Može li se ovo prepisati korištenjem više pozadina? U principu da, ali podložno 1) podršci za ovu funkciju u ciljnim pretraživačima i... 2) čitanju dalje;)

Kako dodati dinamiku u više pozadina? U takvoj situaciji ispada zgodno da u internom predstavljanju pretraživač distribuira pojedinačne parametre pozadinskih slika prema odgovarajućim pravilima. Na primjer, za pozicioniranje postoji “background-position”, a za smjene je dovoljno promijeniti samo ovo. Međutim, postoji trošak za korištenje više slika - ovo pravilo (i svako slično) zahtijeva od vas da navedete poziciju za sve pozadine definirane za vaš blok, a to ne možete raditi selektivno.

Za dodavanje animacije našoj riblje pozadini, možete koristiti sljedeći kod:
$(document).ready(function() (var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; funkcija animationLoop() (ribeY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; fishY = -10 + (10 * Math.cos(t * 0,091)); ribaX = 10 + (5 * Math.sin(t * 0,07)); sea.style.backgroundPosition = "gore " + fishY + "px desno " + fishX + "px, " + mermaidX + "px dolje," + fishesX + "px " + fishesY + "px, gore lijevo"; window.requestAnimFrame(animationLoop); ) animationLoop(); ));
Gdje
window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) (wind.setTime,0000000) ); )); ))();

I usput, animacije se mogu raditi i pomoću CSS3 Transitions/Animations, ali ovo je tema za posebnu raspravu.

Paralaksa i interaktivnost

Konačno, slični manevri mogu lako dodati efekte paralakse ili interaktivnu interakciju s pozadinom:

Višestruke pozadinske slike su korisne u takvim scenarijima, jer dok govorimo samo o pozadini (a ne o sadržaju), njihovo korištenje nam omogućava da izbjegnemo prljanje html koda i DOM-a. Ali sve ima svoju cijenu: ne mogu se obratiti pojedinačni elementi kompozicije po imenu, ID-u, klasi ili nekom drugom parametru. Moram eksplicitno zapamtiti redoslijed elemenata u kompoziciji u kodu, a za svaku promjenu bilo kojeg parametra bilo kojeg elementa, zapravo, moram zalijepiti red koji opisuje vrijednosti ovog parametra za sve elemente i ažurirati ga za celokupnu kompoziciju.

Sea.style.backgroundPosition = "gore " + fishY + "px desno " + fishX + "px, " + mermaidX + "px dolje," + fishesX + "px " + fishesY + "px, gore lijevo";

Siguran sam da se ovo može završiti pogodan kod u javascriptu, koji će preuzeti virtuelizaciju odnosa sa pojedinačnim slojevima, ostavljajući pritom html kod stranice što čistiji.

Šta je sa kompatibilnošću?

Sve moderne verzije popularni pretraživači, uključujući IE9+, podržavaju više slika (možete provjeriti, na primjer, sa caniuse).

Modernizr možete koristiti i za pružanje pretraživača koji ne podržavaju više pozadina alternativna rješenja. Kao što je Chris Coyier napisao u svom postu o redoslijedu slojeva kada koristite više pozadina, učinite nešto poput ovoga:

Multiplebgs body ( /* Sjajne višestruke BG deklaracije koje nadilaze stvarnost i imsources ribice */ ) .no-multiplebgs tijelo ( /* laaaaaame backback */ )
Ako ste zbunjeni korištenjem JS-a za pružanje kompatibilnost unatrag, možete jednostavno deklarirati pozadinu dvaput, međutim, ovo također ima svoje nedostatke u obliku mogućih dual boot resursi (ovo zavisi od implementacije css obrade u određenom pretraživaču):

/* višestruki bg backback */ background: #000 url(...) ...; /* Sjajne višestruke BG deklaracije koje prevazilaze stvarnost i imsources ribe */ background url(...), url(...), url(...), #000 url(...);

Ako ste već počeli razmišljati o Windows 8, imajte na umu da možete koristiti više pozadina kada razvijate aplikacije u stilu metroa, jer koristi isti mehanizam kao IE10.

P.s. Na temu: Ne mogu a da se ne sjetim fenomenalnog članka o .

Tagovi:

• css3
• više pozadina
• granice i pozadine

Dodaj oznake

Možete dodati više pozadinskih slika jednom elementu odjednom kroz jedno svojstvo pozadine. Ovo vam omogućava da se snađete sa jednim elementom za stvaranje složena pozadina ili jednu sliku, prikazujući je nekoliko puta sa razne postavke. Sve slike sa svojim parametrima su navedene odvojene zarezima, pri čemu je slika koja se prikazuje iznad ostalih slika prva, odnosno poslednja, najniža slika. Primjer 1 pokazuje kako napraviti pozadinu sa tri slike.

Primjer 1. Tri pozadine

Ako trebate posebno postaviti neko svojstvo stila za pozadinu, kao što je veličina pozadine kao u gornjem primjeru, tada su parametri za svaku pozadinu navedeni odvojeni zarezima. Rezultat ovaj primjer prikazano na sl. 1.

Rice. 1. Pozadina sa tri slike

Pojedinačne pozadinske slike vam omogućavaju da promijenite njihov položaj i da ih animirate, kao što je prikazano u primjeru 2.

Primjer 2: Animirana pozadina

Razmotrimo sada kako koristiti jednu sliku za kreiranje bloka sa okvirom (slika 2). Širina bloka je fiksna, a visina varira u zavisnosti od zapremine sadržaja bloka.

Rice. 2. Ručno nacrtani okvir

Na slici su jasno prikazani gornji i donji dijelovi koje je potrebno izrezati grafički editor i postavite ga vodoravno. Srednji dio je odabran tako da se ponavlja okomito bez šavova. Slika ima naglašeni uzorak koji se ponavlja, tako da ne bi trebalo biti poteškoća da je istaknete. Rezultat će biti pripremljena slika (slika 3). Karirano polje označava transparentnost; omogućava vam da postavite pozadinu u boji zajedno sa slikama i lako je promijenite kroz stilove.

Rice. 3. Slika pripremljena za pozadinu

Samu pozadinu prikazuje svojstvo background, koje također specificira koordinate željenog fragmenta. Parametri svake pozadine su navedeni odvojeni zarezima, au ovom slučaju njihov redoslijed je važan. Želimo da se gornji i donji dio bloka ne preklapaju, pa ih stavljamo na prvo mjesto (primjer 3). Boja pozadine je navedena posljednja.

Primjer 3. Nekoliko pozadinskih slika

Prva pozadina prikazuje gornju granicu bloka, druga pozadina - donju, a treća - okomite ivice. Posljednja je boja koja je vidljiva u providnom središnjem dijelu bloka (sl. 4).

Važan dio web dizajna su CSS pozadine. Svojstva pozadine sadrže boje i slike koje služe kao pozadina sadržaja i odgovorne su za estetiku stranice. Ukloni CSS pozadine sa vaše web stranice i najvjerovatnije će se pojaviti kao tekst na bijeloj pozadini.

Iako je relativno lako razumljivo, CSS pozadina ipak može izazvati zabunu i postaviti brojna pitanja kada radite na određenim zadacima. Pokušaćemo da razjasnimo ovaj nesporazum i odgovorimo na pitanja koja se javljaju prilikom rešavanja konkretnih problema.

Šta su CSS pozadine?

U suštini, naziv CSS pozadine sadrži njihovu definiciju. Ovo je ono što dodajete pozadini elementa. Preciznije, to su boja ili slika koja se nalazi iza sadržaja koji je dodan unutar elementa. Kada dizajnirate web stranicu zasnovanu na CSS-u, ove boje i slike su obično odgovorne za većinu dizajna u vašem predlošku.

Pozadina elementa je opisana prema blok model CSS. Margine nisu dio pozadine, ali obrube, padding i širina sadržaja dio su pozadine.

Postoji 5 pozadinskih svojstava koja se odnose na CSS selektor, od kojih se 4 odnose na pozadinske slike:

Boja pozadine - – postavlja boju pozadine elementa. Boja se može postaviti na hex, rgb ili jedno od ograničenih imena boja. Takođe, boja pozadine može se postaviti na transparentnu ili naslijediti vrijednost roditeljski element. Za više detalja pogledajte članak Pozadinska slika - postavlja sliku kao pozadinu elementa, a njena vrijednost izgleda kao url (“put do slike”). Svojstvo background-image također može imati vrijednosti none i naslijediti. Ponavljanje pozadine (background-repeat) - postavlja ponavljanje pozadinske slike. Vrijednosti: repeat , no-repeat , repeat-x , repeat-y i inherit . Pozadinski prilog – - postavlja kako pozadinska aplikacija kretat će se sa stranicom. Može da se pomera (pomeranje, kada se stranica skroluje, pomera se sa elementom, podrazumevana vrednost), ostaje fiksna (fiksna, ostaje fiksna u slučaju kada se stranica skroluje) ili nasleđuje vrednost roditeljskog elementa. Pozadina-pozicija - Postavlja početnu poziciju pozadinske slike u elementu. Svojstvo background-position ima dvije vrijednosti, horizontalnu poziciju (može biti lijevo, centar, desno) i vertikalnu poziciju (može biti vrh, centar, dno). Položaj pozadine se također može postaviti na % gornjeg lijevog ugla elementa.

Smanjenje CSS pozadinskih pravila

Moguće je postaviti svako svojstvo pozadine pojedinačno, ali u praksi je bolje to pojednostaviti. U ovom slučaju, svojstva treba postaviti sljedećim redoslijedom: boja, slika, ponavljanje, aplikacija, pozicija (boja, slika, ponavljanje, prilog, pozicija).

Div (pozadina: #0088ff, url("put-do-slike"), repeat-x, skrol, gore lijevo)

Uz ovo pojednostavljenje, ne morate postavljati sva svojstva, ali morate koristiti ispravan redoslijed. Svojstva koja ne navedete imat će sljedeće zadane vrijednosti:

• boja pozadine: transparentna
• background-image: nema
• background-repeat: ponoviti
• pozadinski prilog: listanje
• pozadinski položaj: 0% 0%

Primjer stenografske notacije prikazan je u nastavku:

Pozadina: #0077ff pozadina: url("path-to-image") pozadina bez ponavljanja: url("path-to-image") gore lijevo

U svakom od gornjih redova koda, zadane vrijednosti će se koristiti za svojstva koja nisu posebno postavljena.

CSS pozadinske slike nisu HTML slike

Važno je razumjeti da su slike navedene sa koristeći CSS pozadine se ponašaju drugačije od slika navedenih pomoću oznake .

Oznaka img kreira novi blok. CSS pozadinska slika se postavlja unutar postojećeg bloka. Ne možete dodati margine, obrub ili pozadinu CSS pozadinskoj slici. Također, CSS pozadinskoj slici ne može se dati širina i visina.

Pošto je slika u html-u novi blok (inline blok, odnosno omotan je oko drugih elemenata), ima širinu i visinu, padding i margine, kao i ivicu. Štaviše, da img tag možete primijeniti pozadinu CSS slika. Ne znam koliko se to često koristi u praksi, ali ako želite, možete dodati pozadinsku sliku iza slike.

Odgovori na uobičajena pitanja

Iako je pozadinsko svojstvo relativno jednostavno za korištenje i razumijevanje, rad s njim i dalje može dovesti do brojnih pitanja.

1. Zašto se pozadinska slika ne prikazuje?

To je obično zbog činjenice da element nema ni širinu ni visinu. Zapamtite da pozadinska slika ne stvara blok, već ispunjava postojeći. Ako ovaj blok nema ni širinu ni visinu, jednostavno nema šta popuniti. Rješenje je da se elementu daju dimenzije. Elementu (ne pozadinskoj slici) možete dati visinu i širinu ili ispuniti element sadržajem, pri čemu se širina i visina sami kreiraju.

U nekim slučajevima, element može sadržavati sadržaj na koji je primijenjen float property, koji izvlači sadržaj iz glavnog toka dokumenta. U ovom slučaju, element koji sadrži sadržaj (gdje žele dodati pozadinu) formalno nema dimenzije. Da bi element imao dimenzije (tako da se čini da sadržaj na koji je primijenjeno svojstvo float ne izlazi iz glavnog toka dokumenta), morate primijeniti overflow svojstvo.

2. Mogu li koristiti više pozadinskih slika?

Da i ne. CSS3 specifikacija vam omogućava da koristite više pozadinskih slika, međutim, budući da nisu svi pretraživači u potpunosti vođeni ovom specifikacijom, bolje je odložiti korištenje više slika.

Također treba imati na umu da možete primijeniti pozadinu na sve HTML elemente. Recimo da imate div koji sadrži h2 i pasus. Možete primijeniti pozadinske slike na svaku od njih i, kontrolirajući druga CSS svojstva, možete postići ono što želite!!! efekat. Također možete umetnuti dodatne divove i raspone unutar i izvan elementa, što će stvoriti više elemenata kojima možete dodati pozadinu. Ovaj pristup je prilično težak, ali funkcionira.

3. Kako zamijeniti pozadinske slike kada pređete mišem preko elementa?

Postoje dva načina. Morate dodati novo pravilo elementu pomoću pseudo-class:hover tako da pokazuje (pozadinska slika) na novu sliku, ili da slika izgleda kao Sprite CSS i promijenite njegovu pozadinu da prikažete drugačiji dio sprite-a.

Važno je napomenuti da starije verzije IE ne podržavaju pseudo-class:hover prirodno, tako da će vam ove metode raditi u IE-u trebat će vam malo javascripta. Više volim da koristim sockerfish rešenje, isto rešenje koje koristim za padajuće menije.

4. Kako učiniti pozadinske slike transparentnim?

Možete dodati transparentnost slici kada je kreirate u Photoshopu. U tom slučaju, tip slike se može promijeniti, ali i dalje nećete moći vidjeti kroz nju.

5. Mogu li postaviti pozadinsku sliku u tabelu, red tabele ili ćeliju tabele?

Da. Ovo su sve html elementi, tako da mogu preuzeti svojstva pozadine. Međutim, pozadine stolova imaju na teži način definicija koja koristi slojeve i transparentnost kao što je prikazano na slici ispod:

Pozadina elementa na jednom sloju je vidljiva samo ako je pozadina slojeva iznad njega prozirna. Ovo može izgledati prilično zbunjujuće, zbog čega mnogi ljudi radije koriste html atribute kada kreiraju pozadinu za tablice.

Srećom, vrijednost transparentnosti je postavljena na zadanu vrijednost, tako da bi gornji slojevi već trebali biti transparentni. Međutim, kada počnete da dodajete pozadinu jednom delu tabele, postignite pravilan rad može biti prilično teško

.

6. Da li je moguće dodati pozadinsku sliku na ivice?

Ne još. Ovo svojstvo je obećano da će biti implementirano u CSS3. Ako vam ne smeta što neće raditi u mnogim pretraživačima, možete ga koristiti sada.

7. Mogu li dodati pozadinske slike na liste?

Da. Liste su isti html elementi, tako da mogu prihvatiti pozadinske slike. Pozadinska slika se lako može koristiti kao oznaka za listu. Mislim da sa ovim neće biti poteškoća.

8. Kako dodati dopunu pozadinskoj slici?

Kao što sam ranije spomenuo, pozadinska slika ne stvara novi CSS blok, tako da joj ne možete dodati pozadinu. Umjesto toga, trebate koristiti svojstvo background-position da biste pomaknuli rezultirajuću pozadinsku sliku. Postoje i druge metode.

9. Kako poravnati pozadinsku sliku udesno.

Slično prethodnim pitanjima, odgovor se odnosi na pozadinu. Koristite pravu vrijednost za svojstvo background-position (background-position:right;) i slika će biti poravnata s desnom ivicom elementa.

10. Zašto se pozadinska slika ne pojavljuje kada se odštampa?

Ne postoji kontrola nad ovom imovinom iz dobrog razloga. Za štampanje slike potrebno je mnogo mastila, pa mnogi ljudi odlučuju da je ne štampaju. Da li da se štampa ili ne slika se postavlja pojedinačno u pretraživaču. Preporučujem da sve ostavite kako jeste, ali ako odlučite da štampate, evo načina da zaobiđete zabranu štampanja pozadinskih slika justaddwater.dk/2009/09/29/print-css-background-logo-hack/ .

11. Kako da rastegnem pozadinsku sliku da stane u element?

Za druge moguće rješenje služi za kreiranje slike koja je mnogo veća nego što je potrebno, a pozicija pozadine je postavljena na 50% 50%. Na ovaj način će pozadinska slika biti centrirana unutar elementa, a kako se širina elementa povećava, više slika postaje vidljivo. Slika će ostati centrirana.

Nije baš rastezanje, ali osigurava da slika ispunjava prostor kako se prostor povećava.

12. Da li je moguće umotati vezu oko pozadinske slike?

br. Još jednom, pozadinske slike ne stvaraju blokove. Rješenje bi bilo dodavanje veze oko cijelog sadržaja unutar html elementa ili omotavanje veze oko samog elementa. Izbor opcije zavisi od html elementa i sadržaja unutar ovog elementa.

Zaključak

Nadam se da će vam ovaj članak pomoći da riješite probleme koji se mogu pojaviti pri radu s njima pozadinska svojstva CSS-a, ili riješite svoj problem. Važno je zapamtiti, CSS pozadine nemojte kreirati nove blokove. Oni ispunjavaju samo postojeće html blokove. Razumijevanje ovoga će vam pomoći da odredite šta možete, a šta ne možete raditi sa pozadinskim slikama.

CSS pozadine igraju ključnu ulogu u uticaju vašeg dizajna na korisnika. Većina slika koje kreirate za svoju web stranicu bit će postavljena pomoću svojstva pozadine, tako da je ovo prva stvar koju trebate savladati.