Фон в CSS

Фон элемента HTML — это то, что появляется за текстом. Хотя CSS позволяет применять фон к элементу любого типа, он в основном используется для блочных элементов.

Фон применяется только к целевому элементу. Учитывая, что у большинства элементов HTML фон прозрачный, применение фона к <body> будет выглядеть так, словно он применяется ко всем элементам.

background-color

Значение по умолчанию: transparent; наследуется дочерними элементами: нет.

Так как мы уже рассмотрели разные способы определения цвета в CSS, применять цвет фона просто:

body { background-color: #f2eee9; }

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

background-image

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

Для добавления фонового изображения требуется указать только его URL:

body { background-image: url(images/diagonal-pattern.png); }

Поведение изображения (как оно повторяется, где расположено, какой у него размер) определяется другими свойствами фона. background-image задаёт только, какое изображение использовать.

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

Разница между <img> и фоновыми изображениями

Элемент <img> предназначен для изображений, которые являются частью содержимого, в то время как фоновые изображения в CSS чисто декоративные.

Логотип компании, эскизы галереи, изображение продукта и др. — всё это считается содержимым и для него следует использовать элемент <img>.

Диагональный узор, красивый пейзаж, иконка корзины и др. — их можно рассматривать как декоративные, так как они поддерживают содержимое, но не являются его частью. Если бы они исчезли, у веб-страницы по-прежнему сохранится смысл.

Что касается многочисленных двойных выборов, граница между содержимым и стилем размыта. Некоторые визуальные методы легче достичь с помощью фона CSS. Просто спросите себя, важно ли для страницы изображение, которое вы используете. Если да, то применяйте элемент <img>.

Градиенты

CSS также позволяет определять цветовые градиенты в качестве фонового изображения, двух различных видов:

  • linear-gradient для градиентов в одном направлении, в прямоугольной форме;
  • radial-gradient для градиентов во всех направлениях, в круговой форме.

Мы расскажем о градиентах позже. Единственное, что нужно сейчас знать — фоновые градиенты рассматриваются в качестве фонового изображения:

body { background-image: linear-gradient(white, grey); }

background-position

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

Для каждой координаты вы можете использовать:

  • значения в пикселях;
  • проценты, относительно размеров элемента HTML;
  • ключевые слова, такие как center, left, bottom и др.
body { background-position: right bottom; }

Вы можете смешивать разные единицы координат:

body { background-position: center 20px; }

background-repeat

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

body { background-repeat: repeat-x; } /* Только по горизонтали */
body { background-repeat: repeat-y; } /* Только по вертикали */
body { background-repeat: no-repeat; } /* Фоновое изображение появится только один раз */

Перейти к заданиям

Автор: Джереми Томас
Последнее изменение: 24.10.2016
Редакторы: Влад Мержевич