Фон элемента 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; } /* Фоновое изображение появится только один раз */
Перейти к заданиям
Автор: Джереми Томас
Последнее изменение: 13.08.2017