w3sedic

more_vert menu
Facebook Youtube Instagram

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 Pozicija CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Pozadine

undo redo



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.

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.

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

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

Primjer repeat-y

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




Primjer no-repeat

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.

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;
}



undo redo



© Copyright 2019. w3sedic | Made with favorite by Nedim Sedic