Staipam fona bildi

Ja darīšana būtu ar <img> tagiem, viss būtu vienkārši, - kā zināms, vai nu pašos tagos, vai css definīcijās viņiem var norādīt atribūtus

width: 100%, height: 100%

Fona bildei šādu atribūtu nav.

Uzziņai par fona bildes atribūtiem varam apciemot lielisko W3 Schools CSS mācību līdzekli. Tur pārliecināmies, ka nekas fona bildes staipīšanai no CSS nav pieejams.

Risinājums

Redzam, ka fona bildi staipīt nevar, bet parastu bildi var - acīmredzami, varētu mēģināt fonam lietot <img> tagu. Sākotnēji normāla tabulas šūna html'ā izskatās šādi -

<td>te iet šūnas teksts</td>

Ieviešam <img> tagu un dabūjam -

<td><img class="bg" src="bg.jpg">te iet šūnas teksts</td>

un CSSā pievienojam definīciju

.bg { width: 100%; height: 100%; }

Vienīgā problēma - jāpanāk, ka mūsu <img> tiek attēlots zem tabulas šūnas satura - nevis pāri tekstam, vai virs vai zem tā. Risinājums ir šāds - gan bildi, gan tekstu pozicionēsim absolūti un tad ar CSS z-index atribūtu sakārtosim pareizā secībā.

Par elementu pozicionēšanas veidiem vienkārši ideāli ir uzrakstīts šeit. Tātad, lai varētu pozicionēt arī šūnas tekstu, ieliekam to <div> tagos un dabūjam -

<td><img class="bg" src="bg.jpg"> <div class="poz">te iet šūnas teksts</div></td>

un CSS:

.bg, .poz { width: 100%; height: 100%; position:absolute; } .bg { z-index: 0; }

Šobrīd viss ir gandrīz ideāli. Tikai viens BET. Kā zināms, ja elements ir pozicionēts absolūti, tas tiek novietots absolūti attiecībā pret to saturošo elementu. Ja saturošā elementa nav, mūsu elements tiek pozicionēts absolūti pret visu lapu. Saturošais elements ir tāds elements ir tāds elements, kurš pats ir "kaut kā" pozicionēts, un, turklāt, tabulas šūna *nevar* būt saturošais elements. Kāpēc tā - labs jautājums.

Tātad šeit mums ir problēma - ja izmēģinātu šo kodu tādu, kāds viņš ir šeit, mēs dabūtu savu fona bildi izstaipītu pa visu ekrānu, kas, visticamāk, nav tas, ko vēlējāmies panākt.

Ko darīt - ieviešam vēl vienu lieku div elementu, kas aptver mūsu bildi un mūsu tekstu, kurš ir pozicionēts un, tātad, pret šo varēsim nopozicionēt savus absolūtos elementus:

<td><div class="container"><img class="bg" src="bg.jpg"><div class="poz">te iet šūnas teksts</div></div></td>

un CSS:

.container { position: relative; left: 0; top: 0; width: 100%; height: 100%; } .bg, .poz { width: 100%; height: 100%; position:absolute; } .bg { z-index: 0; }

Un viss, un gatavs. Strādājošu rezultātu var aplūkot šeit. Testēts uz IE 5.5 un Firebird 0.7.

Secinājumi

fona attēlu *ir* iespējams izstaipīt, turklāt bez kādiem js, flash utml. Trūkumi - ir nākuši klāt lieki tagi, kas nevis strukturē saturu, bet gan kalpo tā pareizai atēlošanai - tas nav pareizi. Abi jaunieviestie DIV tagi šeit ir bez kādas semantiskas jēgas, <img> tags arī ir lietots ne gluži tam, kam tas ir paredzēts. Līdz ar to, diemžēl šo nevar uzskatīt par pilnīgu problēmas risinājumu, drīzāk par "workaround'u".

Noslēdzošās piezīmes

Šādu tehniku var lietot ne tikai tabulā. Lietojot to iekš <div> vai <p> varēsim iztikt bez ārējā div'u pāra.

Ja fona attēls ir domāts glītai maliņu noformēšanai, to var pagatavot kā caurspīdīgu gif'u, un likt pāri tekstam - teksts vienalga būs redzams - tiekam vaļā arī no otra liekā div'a.

Nekādi negarantēju šī raksta 100% pareizību un piemērotību dažādajām dzīves situācijām. Mīļi tiek gaidīti komentāri un idejas glītākam un labākam risinājumam.

Uz TĀ datora ekrāna loga rotājas uzraksts "Completing the Windows 2000 Setup Wizard". Man jāiet uzspiest uz "Finish", tā ka - sveiki.