Tutor.blog

Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u HTML i CSS kodu. Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja web stranica koje ne moraju biti nužno vezane uz blog.

Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.

Besplatni predlošci za blog

Postavljanje slikovne pozadine

Ako želite umjesto pozadine u boji imati neku sliku, postoji način da to napravite pomoću CSS-a (može se i bez upotrebe CSS-a, ali pošto je CSS tako super i kul onda ćemo ga koristiti :)).
Najprije trebate pronaći sliku. Dozvoljeni formati su GIF, JPG (JPEG) i PNG, s time da su prva dva učestalija.
Onda je trebate uploadati na neki besplatni hosting.
Zatim trebate zapamtiti njenu adresu (kopirajte u Notepad, gdjegod). Ako koristite ImageShack budite sigurni da ste uzeli pravi kod! Naći ćete ga pod "Direct-link to image". Ta bi adresa trebala izgledati ovako nekako: http://www.server.com/slika.gif što naravno ovisi o servisu koji koristite. Ja ći koristiti ovu adresu kao primjer, a vi je (žalosno što to moram naglašavati) izbrišite i upišite umjesto nje svoju!
I sad nastupa ovaj tutorial. Napomena: ako ne znate gdje treba kopirati ove kodove, znači da ne znate dovoljno! Stoga trk na Uvod u CSS i Mijenjanje boja predloška.


Postoje dvije vrste pozadina, nešto što ljudi zovu wallpapers i ono što zovu backgrounds. Razlika je u tome što su wallpaperi ogromne slike sa milijunima boja koje se koriste na desktopu računala, a backgrounds (osim što ih možete staviti na desktop) služe i kao pozadine web stranica. Vi možete postaviti bilo kakvu sliku za pozadinu, ali molim vas razmislite dobro - ako je slika prevelika i sadrži mnogo boja, trebati će dosta vremena da se učita. Repeating backgrounds ili patterns su male slike koje se nastavljaju same na sebe, kao pločice. Ako mnogo takvih malih sličica postavite jednu do druge, one će se stopiti u veću i tako tvoriti veliku površinu. To se događa sa svim slikama kada ih postavimo kao pozadinu, osim ako ne odredimo drugačije.


Sliku postavljamo za pozadinu dokumenta tako da dodamo ovu liniju CSS-a:

body {background-image: url(http://www.server.com/slika.gif); }

Takva slika će se ponavljati cijelom širinom i visinom dokumenta.
Najčešće greške su da linkate sliku ovako:

body {background-image: url=(http://www.server.com/slika.gif); } KRIVO!

...ili ovako:

body {background-image: url(<img src="http://www.server.com/slika.gif">); } KRIVO!

...ili da ovaj kod upišete iza <body>:

<body>
body {background-image: url(http://www.server.com/slika.gif); }
KRIVO!

Čitajte pažljivo što sam napisala, ovo su gotovi primjeri, prilično jednostavni za početak.


Ako želimo da se slika ponavlja samo u horizontalnom (vodoravnom) smjeru, tada kod izgleda ovako:

body {background: url(http://www.server.com/slika.gif) repeat-x; }

Da bi se slika ponavljala samo u vertikalnom smjeru, treba vam ovaj kod:

body {background: url(http://www.server.com/slika.gif) repeat-y; }

Ako ne želite da se slika ponavlja, onda je kod ovakav:

body {background: url(http://www.server.com/slika.gif) no-repeat; }

Ako želite da pozadinska slika stoji na mjestu dok scrollate sadržaj stranice, dodati ćete jednu liniju koja će osigurati da slika bude fiksirana:

body {background: url(http://www.server.com/slika.gif) fixed;}

Ako želite da slika bude centrirana i da se ne ponavlja:

body {background: url(http://www.server.com/slika.gif) center center no-repeat;}

Ako želite da slika bude na dnu desno, da se ne ponavlja i da bude fiksirana prilikom skrolanja:

body {background: url(http://www.server.com/slika.gif) right bottom fixed no-repeat;}

Ovo što sam objasnila na primjeru za BODY vrijedi i za DIV-ove, tablice (TABLE), linkove (A), paragrafe teksta (P)...
Slika ne može biti rastegnuta preko cijelog ekrana! Putem CSS-a to je nemoguće, a zaobilaznim putem nije vrijedno truda. Ionako ne izgleda dobro već pikselizirano.

06.03.2005. @ 00:10

Blog je neaktivan i nije ga moguće komentirati. Obrazloženje

Nela Dunato Art & Design

Još niste uspjeli naći baš ono što vam treba? Pretražite cijeli Tutor.Blog:

Google

Informacije, razno

Tekstovi, slike i izvorni kod: nelchee


Nela Dunato art & Design
Moj design portfolio


In obscuro
Besplatni predlošci za web stranice


Cwtam - sketchblog
moj sketchblog




Prati me na Twitteru


Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a (Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D


Tutor.Blog


HTML i CSS tutoriali


HTML i CSS tutoriali

Sadržaj ovog bloga je autorski rad. © 2005-2007 Nela Dunato
Login
Google

Blog.hr koristi kolačiće za pružanje boljeg korisničkog iskustva. Postavke kolačića mogu se kontrolirati i konfigurirati u vašem web pregledniku. Više o kolačićima možete pročitati ovdje. Nastavkom pregleda web stranice Blog.hr slažete se s korištenjem kolačića. Za nastavak pregleda i korištenja web stranice Blog.hr kliknite na gumb "Slažem se".Slažem se