HTML pozadinska slika : Background Image

HTML slika kao pozadina : Background Image

Pozadinska slika

Odvajanjem sadržaja web stranice od izgleda, pojedina svojstva html elemenata postala su zastarjela i više se ne koriste. Jedno od tih svojstava je html svojstvo background pomoću kojeg se definirala slika kao pozadina cijele stranice, tablice ili ćelije u tablici.

Slika web dizajna

Zamjena html svojstva background css svojstvom

Kada želimo dodati css svojstvo u html element, trebamo dodijeliti vrijednost svojstvu elementa style.

Svojstvom background možemo postaviti više svojstava pozadine elementa istovremeno. Redoslijed navođenja nije obvezujući. Kada želimo dodati css svojstvo u html element, trebamo dodijeliti vrijednost svojstvu style.

Svojstva koja možemo postaviti su: background-attachment, background-color, background-image, background-position, background-repeat.

Primjer dodavanja svojstva <div> elementu:

<div style="background: #fff url('putanja') top left no-repeat fixed;">

Ovaj primjer odjednom postavlja sva slijedeća svojstva i dodjeljuje im vrijednosti:

background-color: #fff;
background-image: url('putanja_do_slike');
background-position: top left;
background-repeat: no-repeat;
background-attachment: fixed;

Primjer dodavanja html svojstva style unutar <div> elementa:

<div style="background: url('krajolik.jpg') no-repeat 50% 20%;">

U ovom primjeru dodajemo sliku kao pozadinu bez ponavljanja po x i y osi. Slika će se nalaziti vodoravno na sredini (vrijednost 50%) i 20% od vrha stranice.

Kada želimo postaviti sliku kao pozadinu cijele web stranice, trebamo <body> elementu dodijeliti svojstvo style .

Primjer za dodavanje pozadinske slike cijele web stranice:

<body style="background: url('krajolik.jpg') no-repeat 50% 20%;">

Slika krajolik.jpg koju smo naveli kao vrijednost url svojstva mora se nalaziti u istoj mapi kao i html datoteka.