Background
от Fuedo - Уеб дизайн енциклопедия
Свойството Background позволява да се променя фонът на даден елемент по по-кратък начин от останалите свойства от семейството:
Свойството Background позволява да зададете цвят на фона:
<html>
<head>
<title>Пример</title>
<style>
body{background:red;}
</style>
</head>
<body>
<p>Червен Фон</p>
</body>
</html>
В горния пример бе зададен червен цвят на фона без да бъде използвано свойството background-color.
Свойството Background позволява също така да поставите снимка без да използвате background-image:
<html>
<head>
<title>Пример</title>
<style>
body{background:url(път до снимката);}
</style>
</head>
<body>
<p>Червен Фон</p>
</body>
</html>
Препоръчваме ви да избегнете слагането на пътят до снимката в кавички защото това може да предизвика проблеми с някой браузъри.
Нека към горният пример добавим и начална позиция на фоновото изображение, отново само с употребата на своиството background:
<html>
<head>
<title>Пример</title>
<style>
body{background:url(път до снимката) 20px 10px;}
</style>
</head>
<body>
<p>Червен Фон</p>
</body>
</html>
По този начин фоновото изображение ще започва от 20 пиксела по остта "Х" и 10 пиксела по остта "Y"
(не забравяйте да посочите мерните единици(px, em, pt и т.н.)). Вместо единици можете да използвате и специалните думи:
- top
- bottom
- left
- right
Така фоновото изображение ще започва съответно от най-горната част на областта(top), от най-долната част(bottom), от най лявата (left), и от най-дясната(right).
Сега искаме да кажем на изображението да се повтря само по остта "Х":
<html>
<head>
<title>Пример</title>
<style>
body{background:url(път до снимката) 20px 10px repeat-x;}
</style>
</head>
<body>
<p>Червен Фон</p>
</body>
</html>
Изображението ще се повтаря само по оста "Х". Останалата част ще остане прозрачна.
Ако искате да запълните останалата част от елемента, незапълнена с фоновото изображение, трабва да добавите и цвят:
<html>
<head>
<title>Пример</title>
<style>
body{background:red url(път до снимката) 20px 10px repeat-x;}
</style>
</head>
<body>
<p>Червен Фон</p>
</body>
</html>
По този начин прозрачната част от елемента, останала незапълнена от фоновото изображение, ще бъде запълнена от посоченият свят. Подразбирашата се стойност за свойството background е background: transparent none repeat scroll 0 0; като задавате стойност на всяко от тях вие променяте подразбиращата се стойност съответно за background-color, background-image, background-repeat, background-attachment and background-position. Виждате, че свойството background може да съкрати употребата на всички останали свойства и да ги обедините само в едно като ви спести писане, време, и размер на стиловата таблица.
