|
|
|
Ozadje je zelo pomemben del predstavitve, saj lahko slaba izbira ozadja zelo oteži branje.
Seveda tudi ozadju lahko kontroliramo določene lastnosti in, kot smo že navajeni, so lastnosti tudi tu lepo v angleščini...
Ah, kaj pa drugega - barva ozadja. To nam je že znana lastnost, zato se ob njen ne bi preveč zadrževal.
No, ta pa je že zanimivejša. Z njo lahko, kot verjetno že slutite, postavimo oz. določimo neko sliko kot ozadje. To narednimo tako, da povemo njen naslov (s pomočjo funkcije URL seveda), kot je prikazano na spodnjem primeru.
| Slika kot ozadje ([Ogled]) |
<html>
<style>
body { background-image: url("ozadje.gif"); }
</style>
<body>
To je telo oz. neko besedilo.
</body>
</html>
|
Če slike ne želite, pa lahko uporabite vrednost none. To pride v poštev
takrat, ko nadrejeni element postavi neko sliko, podrejeni pa je ne želi imeti,
kot je vidno na spodnjem primeru, kjer element <p>
postavi sliko, element div pa je ne želi imeti in zato
jo izključi.
| Slike v nadrejenih/podrejenih elementih ([Ogled]) |
<html>
<style>
p { background-image: url("ozadje.gif"); }
div { background-image: none; }
</style>
<body>
To je besedilo v telesu dokumenta!
<p>
To je besedilo v odstavku.<br />
To je besedilo v odstavku.<br />
<div>To je besedilo v elementu DIV.</div>
To je besedilo v odstavku.<br />
To je besedilo v odstavku.<br />
</p>
</body>
</html>
|
To je lastnost, ki se zelo tesno veže na prejšnjo (background-image), saj določa, ali se bo slika ponavljala ali ne, in če se bo ponavljala, določi, kako se bo ponavljala. Glede na to lahko zavzame štiri vrednosti:
To je lastnost, ki se zelo tesno veže na prejšnjo (background-image), saj določa, kje bo slika znotraj elementa stala (jasno je, da je smiselna samo, če je ponavljanje izključeno).
Lastnost lahko določite na več načinov:
Tudi to je ena izmed lastnosti, ki dobi pomen šele, če izključimo ponavljanje. Z njo pa določimo, ali naj bo slika fiksna, ali pa naj se premika ustrezno s stranjo!
Seveda, to pa je lastnost, s katero lahko naenkrat nastavimo vse parametre, ki pa jih moramo zapisati v zaporedju:
| Neskončen levi rob ([Ogled]) |
<html>
<style>
body {
background : silver url("levo.gif");
background-repeat : repeat-y;
background-attachment: fixed;
}
</style>
<body>
S tem smo naredili neskončen levi rob, čeprav je slika
velika samo dve točki in izgleda takole:
<p align="center"><img src="levo.gif" /></p>
</body>
</html>
|
|
|
|