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 |
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.