Stiluri pentru background

Stiluri pentru background

Culoarea pentru fundal (background) sau fotografie poate fi definită pentru întreaga pagină, o celulă a tabelului sau pentru text.

Culoare de fond
background-color defineşte colorit de fond şi poate fi asociat oricărei etichete HTML.

Exemplu: definim un stil pentru întreg BODY şi un altul pentru eticheta p

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

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

Imagine de fond
Imaginile pot fi utilizate ca fundal în spatele întregii pagini, a unui obiect sau a textului.
background-image asociază o imagine ca fundal unui obiect.

Exemplu: definim un stil pentru eticheta p

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

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

Repetare
Funcţie de mărimile obiectului căruia îi sunt asociate imaginile de fond se repetă pe orizontală şi verticală.
Repetarea poate fi controlată prin parametrul background-repeat care poate lua valorile:
repeat-x - imaginea se repetă pe orizontală
repeat-y - imaginea se repetă pe verticală
no-repeat - imaginea nu se repetă

Exemplu: imaginea nu se repetă sub eticheta p:

Cod:

<html>
<head>
<title>Exemplu</title>
<style type="text/css">

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

Poziţia
În mod normal imaginea de fundal începe din colţul stânga sus al obiectului asociat, dar acest lucru poate fi reglementat prin comanda CSS background-position.
Sunt acceptate două valori:
în întâia poziţie poate fi: top, center, bottom, percentage sau pixel
în a doua poziţie poate fi: right, center, left, percentage sau pixel

Exemplu: imaginea de fundal este asociată etichetei BODY fiind amplasată top şi center, lipsit de repetare:
Cod:

<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">

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