САЙТ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ НА РУССКОМ ЯЗЫКЕ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Инструкции CSS Цвета CSS Слои Фона CSS Границы CSS Поля CSS Отступы CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиция CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

CSS3 Закругленные углы CSS3 Границы CSS3 Слои фона CSS3 Цвета CSS3 Градиент CSS3 Тени CSS3 Эффект текста CSS3 Веб шрифты CSS3 2D трансформация CSS3 3D трансформация CSS3 трансформация CSS3 Анимация CSS3 Подсказки CSS3 Стиль изображения CSS3 Объект-подгонка CSS3 Кнопки CSS3 Пагинация CSS3 Несколько столбцов CSS3 Интерфейс CSS3 Переменные CSS3 Бокс размеры CSS3 Гибкий бокс CSS3 Медиа запросы CSS3 Медиа примеры

CSS3 Адаптивный дизайн

Введение Область просмотра Вид сетки Медиа запросы Изображения Видео Фреймворк Шаблоны

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

CSS Макеты CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Поддержка CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы

СSS Фон Слои



С помощью свойства background CSS определяется эффект фона для элементов.

Свойства background CSS:

  • background-color цвет фона
  • background-image изображение фон
  • background-repeat повторение фона
  • background-attachment вложение фона
  • background-position позиция фона

Цвет фона

Свойство background-color задает цвет фона элемента.

Установить цвет фона страницы:

Пример

body {
   background-color: lightblue;
}
Редактор кода »

С помощью CSS, цвета чаще всего указываются:

  • по значению color - будет "red"
  • по значению RGB - будет "rgb(255, 0, 0)"
  • по значению HEX - будет "#ff0000"

Посмотреть цветовые значения CSS полный список возможных значений цвета.

В приведенном ниже примере элементы <h1>, <p> и <div> имеют разный цвет фона:

Пример

h1 {
   background-color: green;
}

div {
   background-color: lightblue;
}

p {
   background-color: yellow;
}
Редактор кода »

Изображение фон

Свойство background-image указывает что изображение используется в качестве фона элемента.

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

Фон изображения для страницы можно задать:

Пример

body {
   background-image: url("paper.gif");
}
Редактор кода »

Ниже приведен плохой пример сочетание текста и фона изображения. Текст очень плохо читается:

Пример

body {
   background-image: url("bgdesert.jpg");
}
Редактор кода »

Примечание: При использовании фонового изображения, используйте изображения, которое не нарушают видимость текста.


Фоновое изображение - повторение по горизонтали или по вертикали

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

Некоторые изображения должны повторяться только по горизонтали или по вертикали, либо они будут выглядеть странно, как это:

Пример

body{
   background-image: url("gradient_bg.png");
}
Редактор кода »

Если изображение повторяется только по горизонтали (background-repeat: repeat-x;), фон будет выглядеть лучше:

Пример

body{
   background-image: url("gradient_bg.png");
   background-repeat: repeat-x;
}
Редактор кода »

Совет: Для повторения изображения по вертикали, установить background-repeat: repeat-y;


Фоновое изображение - установить позицию и без повторений

Показать фоновое изображение только один раз, также определяется свойством background-repeat:

Пример

body{
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
}
Редактор кода »

В приведенном выше примере, фоновое изображение отображается в том же месте, что и текст. Мы хотим изменить положение изображения, так чтобы ему не слишком сильно мешал текст.

Положение изображения определяется свойством background-position:

Пример

body{
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
}
Редактор кода »

Фоновое изображение - фиксированная позиция

Для того чтобы, зафиксировать фоновое изображения (не прокручивалось с остальной частью страницы), нужно использовать свойство background-attachment:

Пример

body{
   background-image: url("img_tree.png");
   background-repeat: no-repeat;
   background-position: right top;
   background-attachment: fixed;
}
Редактор кода »

Фон - сокращеное свойство

Чтобы сократить код, можно также указать все свойства фона в одном свойстве. Это называется свойство сокращения.

Сокращенное свойство для фона background:

Пример

body {
   background: #ffffff url("img_tree.png") no-repeat right top;
}
Редактор кода »

При использовании сокращенного свойства, устанавливается порядок значений свойств:

  • background-color цвет
  • background-image изображение
  • background-repeat повторение
  • background-attachment вложение
  • background-position позиция

Это не имеет значения, если одно из значений свойства отсутствует, значения устанавливаются в таком порядке.


Проверьте себя с помощью упражнений!


Все CSS свойства фона

Свойства Описание
background Устанавливает все свойства фона в одной декларации
background-attachment Устанавливает, будет ли фоновое изображение фиксированным или прокручиваться с остальной частью страницы
background-color Устанавливает цвет фона
background-image Устанавливает фоновое изображение
background-position Устанавливает начальное положение фонового изображения
background-repeat Устанавливает, как фоновое изображение будет повторяться