|
 Določite natančen položaj kateregakoli ozadja!
Kako nastaviti sliko za ozadje si lahko ogledate v vodiču CSS ozadje.
V tem vodiču pa vam bom pokazal, kako določiti položaj slike, ki jo uporabljate za ozadje.
Položaj lahko pišete pod kodo background-position: ali pa kar direktno v background:. Jaz vam priporočam background: (vse na enem mestu).
Povsod morate določiti še no-repeat, da se slika ne bo ponavljala.
Za pravilen prikaz (firefox) morate prav tako dodati vrednost fixed (V različnih primerih to ni potrebno). Več o tej vrednosti si lahko ogledate tukaj.
Položaj ozadja po poglavji:
- položaj z določenimi možnostmi
- položaj s procenti
- položaj s piksli
Priporočam:
- položaj z vnaprej določenimi možnostmi
1. Pozicija slike s pomočjo že določenih možnosti. Prva beseda določi navpični poločaj, druga vrednost pa vodoravni položaj.
top=zgoraj | bottom=spodaj | left=levo | center=sredina | right=desno
Možnosti:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
PRIMERI:
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) center left no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ 1
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) center no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ 2
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) bottom center no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ 3
2. Položaj ozadja s pomočjo procentov (%). Prva vrednost izražena s procenti predstavlja odmik ozadja od levega roba strani (50% = center, 100% = right). Druga vrednost izražena v procentih predstavlja odmik od zgornjega roba spletne strani (0% = top; 100% = bottom).
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) 50% 50% no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ 1
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) 100% 100% no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ 2
3. Položaj ozadja natančno s piksli (px). Prva vrednost v pikslih predstavlja, prav tako, kot pri procentih, odmik od levega roba. Druga vrednost predstavlja odmik od zgornjega roba. Pri nastavitvi ozadja za body bodite pozorni, saj imajo različni ljudje nastavljene različne resolucije ekrana, zato lahko pride do odstopanj pri končnem izgledu.
HTML s CSSjem:
<html>
<head>
<style type="text/css">
body { background: url(banana.gif) 200px 400px no-repeat fixed; }
</style>
</head>
<body>
</body>
</html>
PRIKAZ
Upam, da vam je vodič koristil in, da ste spoznali kaj novega o ozadju in CSSju.
|
