CSS. Работа с фоном

Свойство Background используют для определения фоновых эффектов элемета.

CSS-свойства для определения фоновых эффектов элемента:

1. background-color задаёт цвет фона
2. background-image задаёт фоновое изображение
3. background-repeat задаёт повторения для фонового изображения
4. background-attachment задаёт фиксацию фонового изображения
5. background-position задаёт позицию фонового изображения

Цвет фона

Background-color определяет цвет фона элемента.

Прописывается цвет фона внутри селектора, пример:

body{background-color:#006699;}

Цвета при помощи css определяются разными способами, приведём их:

1. HEX значение, пишется так: "#006699"
2. RGB значение, пишется так: "RGB(255,10,0)"
3. Именное значение, пишется так: "green"

Давайте попробуем задать цвета фона различным элементам:

pre{background-color:#006699;}
h2{background-color:#ff0000;}
span{background-color:#999;}

Есть такая особенность в css, если все цифры цвета равные, то можно записать только первые три, вместо шести.

Фоновое изображение

Background-image позволяет задать фоновое изображение элементу.

По умолчанию, фоновое изображение будет повторятся по всему элементу.

Для всей страницы фоновое изображение устанавливается следующим образом:

body{background-image:url('main.img');}

Только не стоит ставить на фоновое изображение слишком яркие картинки, и картинки, в которых используется много цвета текста, потому что яркие цвета утомляют глаза и привлекают слишком много внимания, а если использовать картинку цветом как и цвет текста, то текст попросту будет сливаться с фоновым изображением, кстати это довольно частая ошибка начинающих.

Повторение фонового изображения

По умолчанию фоновое изображение повторяется и по вертикали и по горизонтали всего элемента, но повторяется оно только в том случае, если её размер меньше размера элемента страницы.

Бывают такие моменты, когда нам нужно чтобы изображение повторялось только по горизонтали или по вертикали, или же вообще не повторялось, для этого в css есть такое свойство - background-repeat.

Приведём несколько примеров:

Повторение по горизонтали.

body{
background-image:url('main.jpg');
background-repeat:repeat-x;
}

Повторение по вертикали.

body{
background-image:url('main.jpg');
background-repeat:repeat-y;
}

Без повторения.

body{
background-image:url('main.jpg');
background-repeat:no-repeat;
}

Фиксированное изображение

В css можно задавать фиксацию фонового изображения при помощи background-attachment

background-attachment

Позиционирование фоновой картинки

По умолчанию фоновое изображение имеет позицию левого верхнего угла элемента, эту позицию можно менять, для этого есть свойство background-position.

Виды позиций:

... Левый верхний угол: left top

... Левый нижний угол: left bottom

... Правый верхний угол: right top

... Правый нижний угол: right bottom

Давайте зададим фоновой картинке позицию правого верхнего угла:

body{
background-image:url('main.jpg');
background-position: right top;
}

Сокращённая запись для фона

В приведённых выше примерах Вы видели как можно задавать разные свойства для фона, но если их написать все вместе, то получится не малый по размерам код. Но в css можно записать всё это в сокращённом виде:

body {background:#ffffff url('main.png') no-repeat right top;}

Вот порядок задания свойств фону, не обязательно задавать именно всё:

... Цвет фона

... Фоновое изображение

... Повторение фонового изображение

... Позиция фонового изображения

Поделиться...