Naučite se kontrolirati ozadje.

S pomočjo CSSja lahko različnim html elementom določimo različna ozadja. Lahko določimo barvo ozadja ali pa uporabimo sliko. Če določimo sliko za ozadje imamo nato na izbiro še veliko možnosti, ki nam pomagajo narediti spletno stran zanimivo in unikatno.

V tem vodiču vam ne bom pokazal vsak css ukaz posebej, vendar bom uporabil en ukaz v katerem so zbrani vsi drugi. Imenuje se background:

Kako uvoziti CSS kodo v HTML dokument si lahko pogledate tukaj.

CSS ozadje po poglavjih:

- barva za ozadje

- slika za ozadje

- ponavljanje slike za ozadje

- statičen položaj slike za ozadje

- položaj slike ozadja

- vse vrednosti v eni vrstici

Priporočam:

- repeat-x

- background-attachment: fixed;

Pa začnimo!

1. Za ozadje želimo določiti določeno barvo.

HTML s CSSjem:

PRIKAZ

Kot lahko vidite lahko za določitev barve uporabimo šestnajstiški sistem, angleško poimenovanje, rgb vrednosti, ali pa preprosto določimo transparent, kar pomeni prosojno.

2. Za ozadje želimo določiti sliko. Bodite pozorni! Oklepaji morajo biti takoj za url. Brez presledka!

HTML s CSSjem:

PRIKAZ

Kot lahko vidite se slika ponavlja čez celotno stran. To je velikokrat tisto, kar hočemo, velikokrat pa tudi povzroča probleme. Rešitev tega problema si poglejte pod točko 3.

3. Ponavljanje slike za ozadje.

Če želite, da se slika prikaže le enkrat, potem uporabite vrednost no-repeat.

HTML s CSSjem:

PRIKAZ

Če želite, da se slika ponavlja le vodoravno uporabite vrednost repeat-x.

HTML s CSSjem:

PRIKAZ

Tukaj si lahko ogledate, kako se to v praksi uporablja.

Za navpično ponavljanje slike uporabite vrednost repeat-y.

HTML s CSSjem:

PRIKAZ

4. Za bolj zanimivo spletno stran lahko poskrbite tudi s pomočjo vrednosti fixed. Fixed poskrbi, da slika ostane stalno na zaslonu in se ne premika skupaj s tekstom, medtem ko scrollate. Nasprotno od fixed je scroll, ki ima isti učinek, kot, da nebi nič napisali, zato se ne uporablja.

{ background: url(ozadje.gif) no-repeat fixed; }

PRIKAZ KODE HTML s CSSjem

PRIKAZ

5. Kako nastaviti pozicijo oz. položaj slike v ozadju si lahko ogledate v posebnem vodiču, ki ga lahko najdete tukaj.

6. Sedaj pa vam bom pokazal, kako lahko vse to uporabite v eni vrstici. Preprosto. Vse spišete v eni vrstici.

{ background: #00EAFF url(ozadje.gif) repeat-x center fixed; }

PRIKAZ KODE HTML s CSSjem

PRIKAZ

Vpliv vrednosti center si lahko ogledate tukaj (položaj slike za ozadje).

7. Tukaj so naštete vse lastnosti, ki smo jih nadomestili s preprosto besedo background:

- background-color:
- background-image:
- background-repeat:
- background-attachment:


Upam, da vam je bil vodič v pomoč.