CSS/Taustad

Tausta defineerimiseks on järgmised võimalused:

Taustapilt: background-image

Väärtus: <URI> | none | inherit

Atribuut background-image määrab taustaks kasutatava pildi. Vaikimisi paanitakse pilti niimitu korda, kui on tarvis kogu tausta katmiseks. Kui pilt on läbipaistev (näiteks gif või png formaadis), siis on läbipaistvad alad taustaga ühte värvi (määratud atribuudiga background-color). Väärtus 'none' määrab, et taustapilt puudub (muidugi võib ka kogu parameetri ära jätta).

Sedaviisi on lihtne luua mitmesuguseid mustreid kasutades pilte, mis üksteise kõrvale paigutades ühte sulavad. Mõningaid selliseid pilte on väga kerge ise luua (näiteks mitmesugused triibulised või ruudulised taustad), samas mitmete keerukamate jaoks on tarvis juba meistrikätt ja / või vastavat programmi.

body { background-image: url("ruudud.png") }
h1 { background-image: url("triibud.png") }

Kuigi taustamustrid on toredad, tuleb nendega olla ettevaatlik, et mitte muuta teksti loetamatuks.

Paanimine: background-repeat

Väärtus: repeat | repeat-x | repeat-y | no-repeat | inherit

Atribuut background-repeat määrab, kas ja millisel moel taustapilti korratakse. Väärtustel on järgmine tähendus:

repeat - pilti paanitakse nii horisontaal- kui vertikaalsuunas (see väärtus on kasutusel vaikimisi)
repeat-x - pilti paanitakse horisontaalsuunas ehk x-telge pidi
repeat-y - pilti paanitakse vertikaalsuunas ehk y-telge pidi
no-repeat - pilti ei paanita

Atribuudi 'background-repeat' abiga saab luua mitmeid kenasid veeriseid. olgu meil näiteks sellised pildid:

- 'siksakk.png'
- 'loss.png'

Nendega võime teha kaks erinevat stiililehte. Esimesel juhul kasutades 'repeat-y':

body
{
    background-image: url("siksakk.png");
    background-repeat: repeat-y;
    padding-left: 100px;   /* jätame pildi laiuse jagu ruumi */
}

Tulemus:

Teisel juhul kasutades 'repeat-x':

body
{
    background-image: url("loss.png");
    background-repeat: repeat-x;
    padding-top: 25px;   /* jätame pildi kõrguse jagu ruumi */
}

Tulemus:

Asend: background-position

Väärtus: <protsent> | <pikkus> | left | center | right || <protsent> | <pikkus> | top | center | bottom | inherit

Atribuut background-position määrab taustapildi asendi (vertikaal- ja horisontaalpositsiooni). Enamasti määratakse asend kahe võtmesõna kombinatsioonina:

top left või left top- ülal vasakul (0% 0%)
top center, center top või top - ülal keskel (50% 0%)
top right või right top - ülal paremal (100% 0%)
center left või left center või left - keskel vasakul (0% 50%)
center center või center - lehe keskel (50% 50%)
center right, right center või right - keskel paremal (100% 50%)
bottom left või left bottom - all vasakul (0% 100%)
bottom center, center bottom või bottom- all keskel (50% 100%)
bottom right või right bottom - all paremal (100% 100%)

Kuid võib määrata ka kasutades protsente - x% y%. Väärtus '0% 0%' tähendab, et pildi ülemine vasak nurk asub tausta ülemises vasakus nurgas. Väärtus '100% 100%' tähistab, et pildi alumine parem nurk asub tausta alumises paremas nurgas. Väärtus '10% 30%' tähistab, et punkt pildil asukohaga 10% vasakult ja 30% ülevalt, asetatakse taustal punkti asukohaga 10% vasakult ja 30% ülevalt. Kui on antud vaid üks väärtus, siis on teine automaatselt 50%.

Määrates asukoha kasutades mõõtühikuid (näiteks Xpx Ypx) paigutatakse pildi ülemine vasak nurk X ühiku kaugusele tausta vasakust servast ning Y ühiku kaugusele tausta ülaservast. Puuduv väärtus asendatakse 50%-ga.

Näiteks võime paigutada teksti taha vesipildi, mis asuks teksti keskel:

body
{
    background-image: url("vesipilt.png");
    background-repeat: no-repeat;
    background-position: center;
}

Tulemus:

Või kasutades koos paanimisega:

body {
    background-image: url("hoiatusriba.png");
    background-repeat: repeat-y;
    background-position: right;
    padding-right: 55px;
}

Tulemus:

Kinnitus: background-attachment

Väärtus: fixed | scroll | inherit

Atribuut background-attachment määrab, kas taust on "kinni kleebitud" või liigub lehekülje kerimisel kaasa. Väärtuse 'fixed' puhul taust ei liigu 'scroll' puhul liigub. Vaikimisi on väärtuseks 'scroll'. Näiteks järgnev kood tekitab lehekülje vasakule servale graafilise veerise, mis lehekülje kerimisel paigale jääb:

body
{
    background-image: url("stars.png");
    background-repeat: repeat-y;
    background-position: left;
    background-attachment: fixed;
}

Tausta fikseerimine toimub ainult peaakna või -vaate suhtes. See tähendab, et näiteks leheküljel olevale kerimisribaga kastil ei liigu taustavärv kui kogu lehekülge kerida, ega ka siis kui kerida vaid konkreetse elemendi sisu.

Lühidefinitsioon: background

Lühidefinitsioon kõigi taustaparameetrite koos defineerimiseks.

Näide:

body { background: #00ffcc url(taust.gif) no-repeat fixed top left }

Lühidefinitsiooni on mugav kasutada ka näiteks üksnes taustavärvi või pildi määramiseks:

h1 { background: blue }
p { background: url("lilled.png") }

Raamat: CSS

<< Positsioneerimine

Loendid >>

Sisukord