Войти
» » » Фон и цвет в CSS

Фон и цвет в CSS

Фон и цвет в CSS

В этой статье мы постараемся рассказать как задаётся фон сайту, а так же цвета отдельных элементов и блоков сайта.
Основными свойствами можно задавать цвета: тексту, фону текста, фону изображений, фону блока, менять цвета рамок и т.д.
Цвета в CSS прописываются как шестнадцатеричным значением, так и просто названием. Но шестнадцатеричное значение позволяет более точно подобрать нужный вам цвет. Пример шестнадцатеричного значения: #AB2348.
Основные свойства и как их применять:

COLOR

Это свойство задаёт цвет текста или элемента. К примеру, если Вы планируете все заголовки выделить красным цветом, а параграфы золотым, то в CSS это будет выглядеть следующим образом:
H1 {color: #FF0000}
P { color: #FFD700}

Для выбора нужного Вам цвета, просто спросите у яндекса: «цвета HTML», он вам предложит множество сервисов.

BACKGROUND-COLOR

Это свойство задаёт фон элемента, им можно задать фоновый цвет абсолютно любым элементам сайта. Так же можно использовать свойство BACKGROUND, оно задаёт фоновую картинку нужному элементу, если картинка не найдена по нужному адресу, то фон элемента будет прописанного вами цвета.

Пример:
body{ background-color: #e8e8e8 } – в этом примере фон сайта будет серого цвета #e8e8e8.
body{ background-color: #e8e8e8 url(../img/bg.jpg) center top no-repeat} – в этом примере задан фон сайта, которым является картинка bg.jpg в папке img, если картинку из папки удалить, то фон сайта будет серого цвета #e8e8e8.
Пример совмещения первых двух свойств:
body{ background-color: #e8e8e8; color: #FF0000 } – в данном случае у вас получиться красный текст на сером фоне.

BACKGROUND-REPEAT

С помощью этого свойства можно контролировать количество повторений изображения по горизонтали и вертикали или вообще отключить повторение изображения. Если свойство не задано, то изображение будет повторяться в пределах блока или сайта.
Это свойство может принимать четыре значения:
Background-repeat: repeat-x ; - повторение по горизонтали
Background-repeat: repeat-y ; - повторение по вертикали
Background-repeat: repeat ; - по вертикали и по горизонтали (значение по-умолчанию)
Background-repeat: no-repeat ; - не повторяется

Пример:

body{ background-image: url(../img/bg.jpg) repeat-x} – в данном случае фоновое изображение будет повторяться только по горизонтали.

BACKGROUND-ATTACHMENT

Этим свойством можно зафиксировать фоновое изображение на экране, другими словами если вы будете упускаться в низ сайта, то фон будет не подвижен. Может иметь только два значения:
- SCROLL - фон прокручивается вместе с содержимым;
- FIXED - фон строго зафиксирован.

По умолчанию (если свойство не прописано, то фон будет перемещаться вместе с контекстов сайта).

Пример:
body{background-image : url(img/bg.png); background-repeat: no-repeat; background-attachment: scroll;} - фон прокручивается вместе с содержимым;

body {background-image : url(img/bg.png); background-repeat: no-repeat; } - фон прокручивается вместе с содержимым;

body {background-image : url(img/bg.png); background-repeat: no-repeat; background-attachment: scroll;} - фон строго зафиксирован;


BACKGROUND-POSITION

Данное свойство позволяет расположить картинку в нужном месте на экране. Расположение можно прописать в пикселях или процентах, отсчёт начинается с верхнего левого угла.

Рекомендуем прописывать в процентах, так как размеры монитора у всех разные и при пиксельном позиционировании расположение вашей картинки на всех мониторах будет разное.

Пример:
body {background-image : url(img/bg.png); background-repeat: no-repeat; background-position: 300px 500px;} – в данном случае изображение (точнее его верхний левый угол) будет на 300 пикселей правее и на 500 пикселей ниже краёв экрана.

body {background-image : url(img/bg.png); background-repeat: no-repeat; background-position: 50% 10%;} – в данном случае изображение (точнее его верхний левый угол) будет по центру (горизонтально) и на 10% ниже в зависимости от размеров экрана.
Стоит запомнить, что в начале всегда пишется горизонтальное, а потом вертикальное позиционирование.


BACKGROUND

Это свойство предназначено для сокращения всех вышеупомянутых свойств.

Пример без сокращения:
body {
background-color:#е8е8е8 ;
background-image : url(../img/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 30%;}

Пример с сокращением:
body {background: #e8e8e8 url(../img/bg.jpg) no-repeat fixed 50% 30% ;}

Рекомендуем использовать все возможные сокращения, так количество строк в вашем CSS файле будет влиять на вес CSS файла, а следовательно и на скорость загрузки Вашего сайта!!!