Home » Resurse Web Design » CSS Backgound Mare

 
 
 

CSS Backgound Mare

Dupa ce am postat articolul cu cele 80 de site-uri cu fundaluri de rezolutie mare, acum vreau sa va invat cum sa faceti acele fundaluri sa arate asa pe site-ul vostru sau pe blogul care il administrati. Asa ca ar fi o idee buna sa va arat cum sa creati astfel de fundaluri cu ajutorul unui CSS prin intermediul unei sau mai multor imagini.

Greseala frecventa: Fundalul se taie

Fundalul se vede super bine sub rezolutii de  1280px. Dar daca ai o rezolutie peste 1280 atunci fundalul va aprea taiat pe margini.

background-cuts-off

Exemplu #1: O singura imagine

O solutie rapida pentru a repara problema mentionata mai devreme: fa marginile imaginii de aceeasi culoare ca si culoarea de fundal a tagului BODY.  Priviti imaginea de mai jos si observati ca marginile imaginii sunt de culori solide.

wdw-bg-image

Partea de CSS

Partea de CSS este foarte simpla. Specificati imaginea de bg (pozitionati-o cum doriti) pentru elementul BODY.

wdw-css-overview

Aici aveti codul CSS:

body {

padding: 0;

margin: 0;

background: #f8f7e5 url(wdw-bg.jpg) no-repeat center top;

width: 100%;

display: table;

}
Observati ca sunt 2 linii extra in selectorul BODY. Asta este pentru a prevenii continutul sa se sparga atunci cand faceti resize la browser (se intampla in FIrefox).
firefox-bug

Eticheta:

Comentariile sunt inchise

Ne pare rau, dar nu poti lasa un comentariu pentru acest post.

Resurse web design