CSS Background

Date: Sestdiena, 02 Okt 2010, 4:52 PM | Ieraksts # 1

Pakāpe:

Ieraksti: 57

īsa pamācība kā veidot CSS background failiņu.

Backgrounda kodējums css failā norāda ar vārdu body.
1. Jāievada šāds kodiņš.

Code

body { }

2. jāievieto background fona krāsas kods iekš iekavām {}.

Code

background: #000000;

*Šajā gadījumā fons tiks attēlots melnā krāsā.
3. Lai ievietotu fona attēlu Jums aiz krāsas koda jāievieto no sākuma semikols ;
Tad nākošajā rindā jāievada sekojošais.

Code

background-image: url("links uz tavu bildi");

Tad fonā būs tava izvēlētā bilde, kura atkārtosies pa x un y asi.
4. Tālāk par attēla atkārtošanos.
Ja negribam lai bilde vispār atkārtotos tad ievadam sekojošo.

Code

background-repeat: no-repeat;

Ja vēlamies lai attēls atkārtotos tikai pa x asi jāievada no-repeat vietā šis.

Code

background-repeat: repeat-x;

Bet ja vēlamies lai attēls atkārtotos y asī tad x vietā jāliek y.
Lai attēlotos attēls gan x un y asī, jaīeraksta tikai repeat.5. Par attēla kustību.
Lai attēls nekustētos ir jāievada atkal šāds kods.

Code

Background-attachment: fixed;

Lai attēls kustētu līdzi lapas saturam vārda vietā fixed jāliek "scroll"
6. Attēla pozīcijas.
Lapas attēla pozicionizēšanās izmanto tādus kodus kā cm, gan % gan norāda ar vārdiem (*tikai angliski). Ja šos kodus neievada. tad vienmēr attēls sāk savu aatēlošanos no kreisās aukšējās malas.
CM kods

Code

background-position: 2cm 2cm;

% kods

Code

background-position: 50% 25%;

Kpds ar vārdiem

Code

background-position: right bottom;

Kodam kopumā vaidzētu izskatīties šādi

Code

body {
           background-color: #000000;
           background-image: url("links uz tavu bildi");
           background-repeat: no-repeat;
           background-attachment: fixed;
           background-position: right bottom;
       }

Nu ceru ka noderēja.
ja nenoslinkosu, drīzumā ceru izveidot texta css pamācību. biggrin :D biggrin
Vēlkas katra koda beigās ir jābūt obligāti šādam simbolam ";", ja nau kods VNk nestrādā.
Ja gadījumā manā pamācībā kāda koda parauga beigās viņu neredzat, tad zinat ja izmantojat informāciju Jums viņš ir jāievieto pašiem. biggrin

uForums.GameHost.lv - Universal Community Forum - Latvia - Join For Free Now