CSS ozadja

Z CSS definicijami tega poglavja določamo značilnosti ozadij izbranih elementov spletnih strani. Možno je določanje:

  • barve ozadij,
  • postavitev slike kot ozadja,
  • vertikalno ali horizontalno ponavljanje slike kot ozadja,
  • pozicioniranje slike na spletni strani.

Lastnosti ozadij:

NN: Netscape, IE: Internet Explorer, W3C: Web Standard

Lastnost Opis
 Vrednosti
 NN IE W3C
background Vse značilnosti ozadji v enem opisu background-color
background-image
background-repeat background-attachment background-position 		6.0 4.0 CSS1
background-attachment Določi ali je slika v ozadju fiksna ali se premika skupaj s premikanje teksta scroll
fixed 		6.0 4.0 CSS1
background-color Postavi barvo ozadja elementa color-rgb
color-hex
color-name
transparent 		4.0 4.0 CSS1
background-image Postavi sliko kot ozadje elementa url
none 		4.0 4.0 CSS1
background-position Določi začetno pozicijo slike v ozadju top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos 		6.0 4.0 CSS1
background-repeat Določi če in kako se bo slika v ozadju ponovno izrisovala repeat
repeat-x
repeat-y
no-repeat 		4.0 4.0 CSS1

Podajanje barv

Barve lahko v stilnih definicijah podamo na več načinov.

Poimensko

Barve lahko enostavno poimenujemo. Primeri:
H1 {color: gray;}
H2 {color: silver;}
H3 {color: black;}

Problema povezana z poimenskih imenovanjem barv sta sledeča:
  • standard določa samo 16 poimensko določenih barv,
  • standard ne določa dejanskega izgleda posamezne barve.

RGB notacija

RGB je kratica za Red - Green - Blue torej rdečo, zeleno in modro barvo. Po temu načinu enostavno povemo kako možno naj bo posamezna barva zastopana. Stopnjo določamo percentualno ali s številom med 0 in 255 - zapisano v desetiškem ali šestnajstiškem načinu.

Primer:
H1 {color: rgb(0%,0%,0%);} /*black*/
H2 {color: rgb(50%,50%,50%);} /*medium gray*/
H3 {color: rgb(128,128,128);} /*tudi medium gray*/
H4 {color: #808080;} /*ponovno medium gray*/
H5 {color: rgb(25%,66%,40%);}

Pogosto uporabljane barve
Barva Odstotek Numerično Šestnajstiško
rdeča rgb(100%,0%,0%) rgb(255,0,0) #FF0000
oranžna rgb(100%,40%,0%) rgb(255,102,0) #FF6600
rumena
rgb(100%,100%,0%) rgb(255,255,0) #FFFF00
zelena rgb(0%,100%,0%) rgb(0,255,0) #00FF00
modra rgb(0%,0%,100%) rgb(0,0,255) #0000FF
indigo rgb(20%,0%,100%) rgb(51,0,255) #3300FF
violična rgb(80%,0%,100%) rgb(204,0,255) #CC00FF
turkizna
rgb(0%,100%,100%) rgb(0,255,255) #00FFFF
črna rgb(0%,0%,0%) rgb(0,0,0) #000000
siva rgb(50%,50%,50%) rgb(128,128,128) #808080
olivna rgb(50%,50%,0%) rgb(128,128,0) #808000
srebrna rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0
bela rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF
škrlatna rgb(50%,0%,50%) rgb(128,0,128) #800080

Primeri

Določitev barve za ozadje elementa
Primer prikazuje, kako določimo barve za ozadja.

<html>
<head>

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>
Postavitev in ponavljanje slike v ozadju

Primer prikazuje, kako v ozadju postavimo sliko in določimo njeno ponavljanje po vertikalni osi.

<html>
<head>

<style type="text/css">
body
{
background-image:
url('slika.jpg');
background-repeat: repeat-y
}
</style>

</head>

<body>
</body>
</html>

Last modified: Wednesday, 26 February 2014, 3:47 AM