O pondere importanta din aspectul vizual al unui site Web este data de imaginea de fundal (background) a paginilor. Aceasta se incadreaza in tema aleasa pentru site si evidentiaza informatia astfel incat imaginea generala a site-ului sa fie placuta.
Pornind de la cea mai simpla solutie, un fundal cu o culoare mata, pana la unele de o complexitate ridicata, background-ul trebuie sa respecte o serie de reguli care tin de modul de afisare a informatiilor intr-o pagina Web:
completeaza tema grafica aleasa pentru site
- nu trebuie sa fie elementul principal deoarece pagina Web respectiva este accesata pentru continut
- fiind un element important, trebuie verificat rezultatul incarcarii paginii Web de catre browsere diferite (Internet Explorer, Firefox, Opera, Safari)
- daca se folosesc imagini, atunci acestea nu trebuie sa aiba dimensiuni foarte mari deoarece afecteaza negativ timpul de descarcare al paginii; pentru a reduce aceasta caracteristica se folosesc diverse formate ce fac compresie (JPEG, GIF, PNG) sau proprietati CSS de repetare a unei imagini;
- trebuie sa se tina seama de rezolutia diferita a monitoarelor; imaginea de fundala a site-ului obtinuta la o rezolutie de 800×600 nu trebuie sa aiba diferente majore, in special la nivel de continut, fata de 1280×1024
- editarea imaginii de pe fundal este indicata sa se realizeze pe baza culorilor de tip web-safe
Proprietăți CSS de manipulare a background-ului unei pagini Web sunt
background
- permite definirea tuturor atributelor pentru fundal intr-o singura declaratie;
- prin aceasta proprietate pot fi definite valori pentru background-color, background-image, background-repeat, background-attachment si background-position in aceasta ordine;
- valorile nu sunt obligatorii si pot lipsi;
- exemplu:
body {
background: #00ff00 url('imagine.gif') no-repeat fixed center;
}
sau
body {
background: #00ff00 url('imagine.gif') fixed center;
}
background-attachment
- stabileste daca imaginea din fundal (stabilita cu cu proprietatea background-image) este fixa sau se deruleaza odata cu continutul paginii;
- valori posibile: scroll (imaginea de pe fundal este derulata), fixed (imaginea de pe fundal are o pozitie fixa, doar continutul paginii derulandu-se) sau inherit (mostenita de la o proprietate parinte)
- valoare implicita: scroll
- exemplu:
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
background-color
- definește culoarea de fundal a unui element din pagina sau a paginii;
- valori posibile: color-name (nume culoare, de exemplu red, black, white), color-rgb (cod rgb culoare in baza 10, de exemplu rgb(255,0,0)), color-hex (cod rgb culoare in hexazecimal, de exemplu #ff0000) sau inherit (valoare mostenita)
- exemplu:
body {
background-color: red;
}
h1 {
background-color: #ff0000;
}
h2 {
background-color: rgb(255, 0, 0);
}
background-image
- definește imaginea din fundalul unui element sau a paginii
- valori posibile: url(URL imagine)
- exemplu:
body {
background-image: url('imagine.gif');
}
background-position
- defineste pozitia de start a imaginii din fundal relativ la coltul din stanga sus al paginii sau elementului
- valori posibile: o combinatie de doua valori ce stabilesc pozitia pe verticala si pe orizontala; cele doua valori pot fi absolute, reprezentand deplasamant in pixeli (10px 30px), pot fi relative, reprezentand deplasament in raport cu inaltimea si latimea paginii (10% 30%) sau pot fi cuvinte cheie (top, bottom sau center pentru deplasamanetul pe verticala si left, right sau center pentru deplasamentul pe orizontala);
- daca se indica doar o valoare, cealalta este implicit center sau 50%; pot fi utilizate combinatii diferite de tipuri de valori (ex. 30px, 40%)
- valoarea implicita: 0px 0px (pentru valori absolute), 0% 0% (pentru valori relative), center sau 50% pentru situatiile cand este specificat doar deplasamentul pe verticala;
- observatie: pentru a avea rezultate in Firefox sau Opera aceasta proprietate trebuie corelata cu background-attachment: fixed;
- exemplu:
body {
background-image: url('imagine.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
background-repeat
- stabileste cum se repeta imaginea de pe fundal
- valori posibile: repeat (repeta imaginea pe veriticala si pe orizontala pentru a umple toata pagina;), repeat-x (repeta imginea doar pe orizontala), repeat-y (repeta imaginea doar pe verticala), no-repeat (imaginea nu este duplicata)
- valoarea implicita: repeat
- exemplu:
body {
background-image: url('imagine.gif');
background-repeat: repeat-y;
}
Exemple de pagini Web ce au ca fundal imagini si diferite stiluri CSS
- Fundal bazat pe o singura culoare
Pagina HTML, cu fundal bazat pe o singura culoare.
- Fundal bazat pe pozitionarea fixa a unei imagini. Imaginea [link imagine] este fixata pe fundal nefiind afectata de derularea pe verticala a continutului acesteia.
Pagina HTML, cu fundal bazat pe pozitionarea fixa a unei imagini.
- Fundal bazat pe repetarea pe orizontala a unei imagini. Imaginea [link imagine] este multiplicata pe orizontala astfel incat se obtine un background pe toata pagina. Acesta metoda este foarte eficienta pentru generarea de pagini ce au pe fundal un anumit sablon deoarece imaginea utilizata are dimensiuni foarte mici (in acest exemplu, imaginea utilizata ocupa 939 Bytes si are 5 x 5000 pixeli)
Pagina HTML, cu fundal bazat pe repetarea pe orizontala a unei imagini.
- Fundal bazat pe derularea unei imagini. Imaginea [link imagine] este fixata pe fundalul paginii derulandu-se pe verticala odata cu continutul acesteia.
Pagina HTML, cu fundal bazat pe derularea unei imagini.
Alte resurse pe aceasta tema: