abc HTML5 i CSS TUTORIAL

Slika kao pozadina dokumenta /BACKGROUND IMAGE/


Slika 1. Tip TAG-a

Slika kao pozadina dokumenta /BACKGROUND IMAGE/ Sintaksa: <body style="background-image:url('putanja/ime_slike.ext');">

  • <body style="background-image:url('');"> obavezno se koristi u BODY TAG-u
  • putanja/ime_slike.ext putanja i naziv slike sa ekstenzijom. Ako slika nije na isto folderu kao dokument treba dodati i putanju.

Slika kao pozadina dokumenta /BACKGROUND IMAGE/ je dizajnersko rješenje. Obično se koriste slike koje nemaju mnogo prelaza svjetlo tamno da bi mogli koristi suprotnu (inverznu) boju za font.


Slika 2. Primjer boje pozadine stranice

Primjer 1. Koristiti sliku baner11.gif kao sliku u pozadini dokumenta.

Kod Objašnjenje Ispis na ekran
<!DOCTYPE html>
<html>
<head>
<title>Slika kao pozadina dokumenta</title>
</head>
<body style="background-image:url('baner11.gif');">
<p>Tekst se vidi iznad slike</p>
</body> </html>		 Dodavanje slike kao pozadine dokumenta baner11.gif Tekst se vidi iznad slike
 

Primjer 2. Pozadina dokumenta je slika baner12.gif.

Kod za prvu sliku Ispis na ekranu
<!DOCTYPE html>
<html>
<head>
<title>Slika kao pozadina dokumenta</title>
</head>
<body style="background-image:url('baner12.gif');">
<p>Tekst se vidi iznad slike</p>
</body> </html>		 Tekst se vidi iznad slike

Primjer 3. Pozadina dokumenta je slika background01.jpg a tekst je bijel.

Kod za prvu sliku Ispis na ekranu
<!DOCTYPE html>
<html>
<head>
<title>Slika kao pozadina dokumenta</title>
</head>
<body style="background-image:url('background01.jpg');">
<p style="color:#FFFFFF;">Ovo je tekst u paragrafu.</p>
</body> </html>		 Tekst se vidi iznad slike

Daljnji rad 1: Pozadina dokumenta je slika baner13.gif.

Daljnji rad 2: Pozadina dokumenta je slika baner14.gif.

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index