Stiluri pentru background

beckham · Administrator Data inscrierii: 28/Noi/2007 Mesaje: 124

Background culoare sau poză poate fi definita pentru intreaga pagina, o celula a tabelului sau pentru text.

5.1 Culoare de fond
background-color defineste colorit de fond si poate fi asociat oricarei etichete HTML.

CSS/exemplu5_1.html">Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>

5.2 Fotografie de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.

Exemplu: definim un stil pentru eticheta p
<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

5.3 Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta

Exemplu: imaginea nu se repeta sub eticheta p
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

5.4 Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest fapt poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in întâia pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare
<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">

</style>
</head>
<body>
Text normal
</body>
</html>