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.

Umetanje css svojstava u html se ne preporučuje radi nečitljivosti kôda. No, ponekad je poradi testiranja ponekad potrebne napraviti iznimku. Ovdje će biti prikazana ta iznimka.

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.

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: #ffffff;
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.

Ako želimo postaviti sliku kao pozadinu cijele web stranice dodjeljujemo svojstvo style <body> elementu.

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.