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>
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.