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.
background-color
, urmata de o valoare care reprezinta numele culorii sau valoarea RGB, exprimata in cod hexa.<!DOCTYPE html> <html> <head> <title>Title</title> <style> body { background-color:#ededfe; } </style> </head> <body> Tutorial CSS - background. </body> </html>
background-image
, urmata de adresa URL a locatiei imaginii.<!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>
background-repeat
, urmata de o valoare care poate avea una din urmatoarele optiuni:
<!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>
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.<!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>
background-position
urmata de doua valori (coordonate X si Y) separate prin spatiu, 'X' pentru distanta orizontala si 'Y' pentru cea verticala.<!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>
background
. Se poat stabili simultan printr-o lista de valori proprietatile fundalului, enumerate in orice ordine si separate prin spatiu.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
poate schimba culoare continutului din elemente HTML: text, linie orizontala sau element de tip formular.
Sintaxa generala:
<!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>
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
#un_id { transform: skew(20deg, 25deg); -ms-transform: skew(20deg, 25deg); /* IE 9 */ -webkit-transform: skew(20deg, 25deg); /* Safari and Chrome */ }
var rightnow = new Date(); alert( rightnow.toString() );
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>"); // aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr $arr = array_map("strip_tags", $arr); }
On Saturday I visit my grandparents. - Sambata imi vizitez bunicii.
Sábado visito mis abuelos. - Sambata imi vizitez bunicii.