NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Pozadine

<< >>



Kako se određuje pozadina u CSS-u?


U CSS-u se može odrediti pozadina za jedan ili više elementa, ili za cijeli dokument.

Pozadina je najčešće postavljena kao određena boja ili slika.

Dodjeljivanje pozadina određenim elementima omogućuje da stranica ima lijep izgled.


Pozadina u CSS-su se određuje sljedećim parametrima:


background-color

background-image

background-repeat

background-position

background-attachment


Sintaksa:

background-color: #FF0000;


background-color


Pomoću background-color parametra određujemo boju pozadine.

Vrijednost parametra može biti ime boje, HEX, RGB ili HSL vrijednost.

play_arrow

body {
   background-color: Tomato;
}




background-image


Pomoću background-image parametra postavljamo sliku kao pozadinu.

Vrijednost parametra se postavlja tako da prvo stavimo url, a zatim u zagradi pod navdnicima navedemo ime slike, odnosno lokaciju gdje se slika nalazi.

play_arrow

body {
   background-image: url("Basketball.png");
}



background-repeat


Pomoću background-repeat parametra određujemo da li će se ponavljati slika na pozadini.

Vrijednost parametra su sljedeće:

repeat-x ponavlja sliku pozadine u horizontalnom smjeru

repeat-y ponavlja sliku pozadine u vertikalnom smjeru

no-repeat ne ponavlja sliku


Primjer repeat-x

play_arrow

body {
   background-image: url("Basketball.png");
   background-repeat: repeat-x;
}

Primjer repeat-y

play_arrow

body {
   background-image: url("Basketball.png");
   background-repeat: repeat-y;
}




Primjer no-repeat

play_arrow

body {
   background-image: url("Basketball.png");
   background-repeat: no-repeat;
}

background-position


Pomoću background-position parametra određujemo poziciju slike.


U ovom primjeru smo postavili sliku u gornji lijevi ugao, bez ponavljanja.

play_arrow

body {
   background-image: url("Basketball.png");
   background-repeat: no-repeat;
   background-position: top right;
}

background-attachment


Pomoću background-attachment parametra određujemo da slika bude fiksirana.

Fiksirana pozadina će biti uvijek na prozoru stranice, tj. neće se pomjerati kada pomjeramo stranicu prema dolje.

body {
   background-attachment: fixed;
}



<< >>



© Copyright 2018. nedschool.com