Tutorial CSS

Data publicarii: Martie 2006

Tutoriale » CSS » Stiluri pentru background

CSS Mar 2006

Stiluri pentru background

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

Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete 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">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>

Imagine 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">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

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">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>

Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima 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">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>

Sus

Tutoriale
17 Feb 2025  10:48 AM

Copyright © 2005-2023 Termeni si conditii
 
Comentarii:

Sus