Načrtovanje in razvoj spletnih aplikacij

Določitev ozadja s CSS

Lastnosti CSS, ki jih lahko definiramo ozadju


Nove možnosti, ki jih je prinesel CSS3 med drugim omogočajo tudi spreminjanje originalne velikosti slike ozadja (lastnost background-size) in dodajanje več slik v ozadje (primer: background: url(slika1.gif), url(slika2.gif);)


background-color

Lastnost background-color določa barvo ozadja kateregakoli elementa. Pri izbiri barve moramo paziti, da barva ozadja ne bo preintenzivna tako, da bo vsebina v ospredju dobro vidna.

Vrednost Pomen
barva barva ozadja
transparent prozorno ozadje, privzeta vrednost
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
<h1 class="barva-ozadja-naslova">Glavni naslov</h1>
<p class="odstavek-zelen">To je odstavek, ki ima zeleno ozadje.</p>
<p class="odstavek-prosojen">To je odstavek, ki ima prosojno ozadje.</p>
<p class="odstavek-rdec">To je odstavek, ki ima rdeče ozadje.</p>
body { background-color: #add8e6 }
.barva-ozadja-naslova { background-color: #ffebcd }
.odstavek-zelen { background-color: #98fb98 }
.odstavek-prosojen { background-color: transparent }
.odstavek-rdec { background-color: #ffa07a } 

Glavni naslov

To je odstavek, ki ima zeleno ozadje.

To je odstavek, ki ima prosojno ozadje.

To je odstavek, ki ima rdeče ozadje.

background-image

Z oblikovno lastnostjo background-image določimo sliko v ozadju kateregakoli elementa. Za ozadje običajno izberemo sliko, ki ne sme biti preveč moteča, stiki med več enakimi slikami pa morajo biti skoraj neopazni. Slika mora biti oblike GIF, JPG ali PNG.

Poleg slike v ozadju lahko elementu določimo tudi barvo ozadja. Čeprav se to na prvi pogled ne zdi smiselno početje, se lahko pripeti, da brskalnik slike iz takega ali drugačnega razloga ne more naložiti. V tem primeru bo ozadje obarval. Tudi na sami sliki bi lahko imeli prosojne dele, skozi katere bi se videla barva ozadja.

Vrednost Pomen
url naslov datoteke, ki vsebuje sliko
none v ozadju ni slike
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
body { background-image: url("bg-demo.png") }

 

 

 

background-attachment

Lastnost background-attachment določa ali se bo slika ozadja premikala skupaj z vsebino strani ali bo mirovala, ko se pomikamo po strani z drsnikom ali kako drugače.

Vrednost Pomen
scroll slika ozadja se premika skupaj z vsemi elementi strani, privzeta vrednost
fixed slika ozadja se ne premika
local slika ozadja se premika samo z določenim elementom
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

background-repeat

Če za ozadje elementa izberemo sliko, lahko z lastnostjo background-repeat določimo, na kakšen način bo slika na ozadju prikazana. Običajno se slika razmnoži po celotnem ozadje elementa (vsebina, notranji odmik in rob), lahko pa izberemo tudi drugačen način razporeditve slike po ozadju.

Vrednost Pomen
repeat slika je razmnožena po celotnem ozadju, privzeta vrednost
repeat-x slika je po ozadju razmnožena samo vodoravno
repeat-y slika je po ozadju razmnožena samo navpično
no-repeat slika v ozadju je prikazana samo enkrat
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

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

 

 

 

body { 
   background-image: url("ozadje.png");
   background-repeat: repeat-x;
}

 

 

 

body { 
   background-image: url("ozadje.png");
   background-repeat: repeat-y;
}

 

 

 

background-position

Če za ozadje elementa izberemo sliko, lahko z lastnostjo background-position določimo položaj slike znotraj elementa. Za vrednost te lastnosti običajno navedemo dve vrednosti, ki ju ločimo s presledkom:

  • prva vrednost določa vodoraven položaj slike znotraj elementa
  • druga vrednost določa navpičen položaj slike znotraj elementa

Vrednost lahko navedemo z besedo, v odstotkih ali pa z dolžino. Če navedemo samo eno vrednost, je druga vrednost enaka center oziroma 50%.

Vrednost Pomen
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
vodoraven in pokončen položaj slike,
če navedemo samo eno vrednost, je druga vrednost enaka center
x% y% prva vrednost je vodoraven položaj, druga vrednost je navipčen položaj (0% 0% je enako left top, 100% 100% je enako right bottom)
dolžina x y x: odmik levega roba slike od levega roba elementa
y: odmik zgornjega roba slike od zgornjega roba elementa
(0px 0px je enako left top)
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa
body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   bacground-position: right top;
}

 

 

 

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

 

 

 

body { 
   background-image: url("ozadje.png");
   background-repeat: no-repeat;
   bacground-position: 50% 50%;
}

 

 

 

background

Lastnost bacground uporabljamo kot bližnjico za nastavitev vseh lastnosti ozadja:

Za vrednost lastnosti background naštejemo vrednosti posameznih lastnosti ozadja v poljubnem vrstnem redu, pri čemer jih ločimo s presledki. Če vrednosti katere od lastnosti ozadja ne navedemo, bo dobila svojo privzeto vrednost.