Configurare culoare fundal - background

Cu proprietatile CSS "background" se poate schimba fundalul intregii pagini, sau pentru un anumit element din pagina, fie el de tip DIV, paragraf, tabel sau formular.

Culoare fundal - background-color

Pentru a schimba culoarea fundalului se utilizeaza proprietatea background-color, urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.
Sintaxa generala:

selector {background-color:valoare }
Daca se foloseste valoarea "transparent" navigatorul va afisa culoarea prestabilita sau cea a elementului parinte.
Pentru schimbarea fundalului intregii pagini se aplica aceasta proprietate selectorului "body".
Iata un exemplu in care culoarea de fundal a paginii este schimbata:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color:#ededfe;
}
</style>
</head>
<body>
Tutorial CSS - background.
</body>
</html>

Imagine de fundal - background-image

Pentru adaugarea unei imagini la fundalul unui element HTML se foloseste proprietatea background-image, urmata de adresa URL a locatiei imaginii.
Sintaxa generala:
selector { background-image:url('adresa_URL'); }
- Unde "adresa_URL" este calea si numele imaginii care va fi folosita.
Daca in locul adresei URL se foloseste valoarea "none", navigatorul nu va folosi nici o imagine.
Iata un exemplu in care pentru fundalul paginii este folosita o imagine:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color:#f8f8fe;
background-image:url('../imgs/smile_gift.png');
}
</style>
</head>
<body>
Tutorial CSS - background.
</body>
</html>

Repetarea imaginii de fundal

In mod initial imaginea de fundal se repeta. Pentru a controla repetarea se aplica proprietatea background-repeat, urmata de o valoare care poate avea una din urmatoarele optiuni: Forma generala este:
selector { background-repeat:valoare; }
Iata un exemplu de cod in care imaginea folosita pentru fundalul paginii se va repeta pe verticala pe toata inaltimea documentului:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color:#f8f8fe;
background-image:url('../imgs/smile_gift.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
Tutorial CSS - background cu imagine.
</body>
</html>

Proprietatea background-attachment

Cu proprietatea background-attachment se poate defini modul de tratare a imaginii de fundal la derularea paginii, cu valorile: "fixed", pentru a lipi imaginea de fundal de fereastra navigatorului sau "scroll", pentru a permite derularea imaginii de fundal.
Sintaxa generala:
selector { background-attachment:valoare }
Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-attachment:fixed;
background-image:url('../imgs/smile_gift.png');
background-repeat:no-repeat;
height:1200px;
}
</style>
</head>
<body>
Tutorial CSS - background cu imagine.<br>
Derulati in jos, imaginea va ramane fixata.
</body>
</html>

Pozitia imaginii de fundal

Pentru a pozitiona imaginea de fundal in functie de coltul din stanga-sus al elementului se utilizeaza proprietatea background-position urmata de doua valori (coordonate X si Y) separate prin spatiu, 'X' pentru distanta orizontala si 'Y' pentru cea verticala.
Forma generala este:
selector { background-position:X Y; }
Coordonatele X si Y pot fi exprimate ca valori absolute (px, em) sau ca procente (%). Se pot folosi si cuvintele cheie: "left", "center" sau "right" pentru coordonata X; respectiv "top", "center" sau "bottom" pentru coordonata Y.

-Iata un exemplu in care imaginea de fundal intr-un Div este pozitionata centrat pe orizontala, la 20 pixeli fata de marginea de sus:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-image:url('../imgs/smile_gift.png');
background-position:center 20px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id='dv_ex'>Div cu background-image.</div>
</body>
</html>

Proprietatea background

Toate proprietatile fundalului pot fi definite in proprietatea background. Se poat stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu.
Cand se utilizeaza proprietatea background, nu este necesar sa fie specificate toate proprietatile, cele nespecificate fiind stabilite la valoare lor implicita.
Sintaxa generala este:
selector {background: background-color background-image background-repeat background-attachment background-position; }
Valoarea implicita a proprietatii background-color este "transparent".
Valoarea implicita a proprietatii background-image este "none".
Valoarea implicita a proprietatii background-attachment este "scroll".
Valoarea implicita a proprietatii background-position este "top left".

Exemplu:
div {
background: #e8e8fe url('imagine.jpg') center top no-repeat;
}
- DIV-ul va avea culoarea de fundal "#e8e8fe", cu o imagine pozitionata "center top" si care nu se repeta.

Proprietatea color

Proprietatea color poate schimba culoare continutului din elemente HTML: text, linie orizontala sau element de tip formular.
Sintaxa generala:

selector { color:valoare; }
Valoarea culorii poate fi: Iata un exemplu de cod CSS in care se definesc culori pentru fundalul si text la elemente "h3":
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h3 {
background:#0000bb;
color:#fefefe;
}
</style>
</head>
<body>
<h3>Si Pacea este Buna</h3>
<h3>E Bun, suntem Fericiti</h3>
</body>
</html>
• Pentru o lista cu mai multe culori specifice, vizitati pagina: Lista coduri culori

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Configurari pentru culori si fundal

Last accessed pages

  1. Introducere in HTML (8533)
  2. Coduri pt culori (24941)
  3. Instructiuni repetitive for si while (1645)
  4. Curs HTML gratuit Tutoriale HTML5 (30146)
  5. Pronumele direct si indirect (758)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2367)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1301)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1197)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (856)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (804)