Цвят на фона (background-color)

Пропъртито background-color определя цвета на фона на един елемент. Цветът на фона на страницата се определя в селектора body:

Със CSS, цвета, най-често се определя като:

• шестнадесетична стойност – като „#ff0000“
• RGB (red, green, blue – смесване на осн. цветове) – като „RGB (255,0,0)“
• име на цвят – като „red“ (червено)

Погледнете CSS цветови стойности за пълен списък на възможните цветови стойности.

В примера по-долу, h1, P, и Div елементи имат различни цветове на фона:

Background-image

Пропъртито background-image използва изображение, като фон на даден елемент. По подразбиране, картинката се повтаря, за да може да покрие целия елемент. Изображението за фон за една страница може да се настрои така:

По-долу сме показали пример за лоша комбинация от текст и изображение за фон. Текстът почти не се чете:

Background-image – хоризонтално или вертикално повторение

По подразбиране, изображението избрано като фон се повтаря хоризонтално и вертикално, за да може да заеме фона на целия елемент. За да изглежда добре сайтът ни, ние може да искаме да повтаряме елемент само хоризонтално, или само вертикално:

Ако изображението се повтаря само хоризонтално (repeat-х), на фона ще изглежда по-добре:

Background-image – позициониране и no-repeat

Забележка: Най-важното е когато използвате картинка за фон, тя да не пречи на текста и да не дразни окото на потребителя. Трябва текстът да е лесно-четим. Можем да повторим изображението си само веднъж, чрез background-repeat пропъртито:

В горния пример, изображението е сложено на същото място като текста. Можем да променим позицията на картинката, за да не пречи на текста твърде много. Позицията на изображението се определя от пропъртито background-position:

Background – Shorthand пропърти

Както видяхте в горните примери, при работа с фонове трябва да имаме предвид много свойства. За да се съкрати кода и повтаряемостта, можем в едно „Shorthand“ пропърти да изброим всички свойства на елемента. Краткото пропърти за обработка на фон, е просто background:

При използването на Shorthand пропърти, реда на изброяване е следния:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Кода ще работи, дори и ако някои от изброените липсва (ако искате да модифицирате само част от тях), но трябва написаните пропъртита да са в определения ред. Този пример използва по-напреднал CSS. Обърнете внимание: Пример за напреднали Как да фиксираме(застопорим) фоново изображение Долния пример показва как се прави фикснато изображение (фона няма да се движи заедно със скролването по страницата).

Всички CSS Background Пропъртита