Adaugare imagine in fundal

Nu uitati sa salvati sablonul inainte de orice modificare in HTML!

Primul pas este sa gasiti (sau sa creati) imaginea pe care o doriti ca fundal. Conditiile de care trebuie sa tineti cont: sa fie mica si sa nu aiba margini distincte (pentru a arata frumos cand se repeta pe toata pagina). Incercati sa nu alegeti o imagine prea mare, pentru ca se incarca greu. Pentru a gasi asemenea imagini, cautati pe Google: "graphic backgrounds".
Dupa ce ati gasit ceva ce va place, salvati imaginea pe calculatorul dumneavoastra, apoi incarcati-o in Photobucket (trebuie sa va faceti un cont) si copiati-i link-ul.

Atentie la copyright! Folositi imaginile gratuite!

In Editati HTML cautati /*Primary layout*/ body{
Sub aceste doua randuri introduceti urmatorul cod: background-image: url(link imagine), unde link imagine va fi inlocuit cu link-ul imaginii dorite, neaparat intre paranteze.



La fel veti proceda si daca doriti sa schimbati imaginea de fundal a spatiului destinat articolelor ( #main-wrapper{ ) sau a spatiului destinat coloanei de meniu a blogului ( #sidebar-wrapper{ ).
In mod automat imaginea se va repeta pentru a umple spatiul alocat (background- repeat: repeat;). In caz ca nu doriti acest lucru, puteti face urmatoarele modificari (inlocuind repeat;): no-repeat; (imaginea nu se repeta), repeat-x; (imaginea se repeta doar pe orizontala), repeat-y; (imaginea se repeta doar pe verticala).
Daca ati ales o imagine care nu vreti sa se repete, poate doriti sa specificati pozitia exacta in care sa apara aceasta imagine. Pentru a realiza acest lucru, in textul HTLM adaugati sub codul in care ati adaugat link-ul imaginii, urmatorul cod: background-position: top left; - imaginea va aparea in coltul din stanga sus a paginii. Alte modificari posibile (inlocuind top left; ): top center; (centru sus), top right; (coltul din dreapta sus), center left; (centru-stanga), center center; (centru), center right; (centru-dreapta), bottom left; (coltul din stanga jos), bottom center; (centru-jos), bottom right; (coltul din dreapta jos).
Dupa ce ati schimbat imaginea, trebuie sa ajustati culorile textului pentru a fi mai vizibil. Pentru asta mergeti la Personalizati->Aspect -> Fonturi si culori.
Si cam atat pentru azi. Data viitoare ne ocupam de header si de linia despartitoare intre articole.

Niciun comentariu:

Trimiteți un comentariu

Printfriendly

Mainile tale ar trebui sa protejeze, nu sa pedepseasca. Ridica mana impotriva bataii copiilor

"Mainile tale ar trebui sa protejeze, nu sa pedepseasca. Ridica mana impotriva bataii copiilor" este o campanie de eliminare a ...