Как добавить фоновое изображение
В этой статье мы покажем, как добавить и позиционировать фоновое изображение в HTML-документе, используя стили CSS.
Как позиционировать фоновое изображение
-
(устанавливает одно или несколько фоновых изображений для элемента) (устанавливает, должно ли повторяться фоновое изображение, а если повторяется, то каким образом) (устанавливает, прокручивается ли фоновое изображение со всей страницей, или оно фиксированное) (устанавливает начальную позицию фонового изображения)
Пример
В этом примере фоновое изображение расположено в центре. Можете также выбрать другие значения, например, left top; left center; left bottom; right top; right center; right bottom; и т.д.
Несколько способов позиционирования фонового изображения:
- repeat (фоновое изображение повторяется и по вертикали, и по горизонтали)
- repeat-x (фоновое изображение повторяется только по горизонтали)
- repeat-y (фоновое изображение повторяется только по вертикали)
Пример
В этом примере фоновое изображение повторяется только по вертикали.
Используйте значение no-repeat, чтобы фоновое изображение не повторялось (изображение отображается только один раз).
Пример
Для того, чтобы создать фоновое изображение на всю страницу с помощью CSS, добавьте фоновое изображение к контейнеру, задав height: 100%.
Пример
Для того, чтобы получить прозрачное фоновое изображение, используйте свойство opacity, которое указывает прозрачность элемента. Выберите значение в пределах 0.0-1.0. , чтобы снизить степень прозрачности (например, 0.5 делает изображение полупрозрачным).
Пример
В вышеприведенном примере изображение имеет прозрачность 50%.
В IE8 и более старых версиях используется filter:alpha(opacity=x), где можно задать значение в пределах 0-100.
Как поставить картинку в качестве заднего фона для body?
Как мне поместить картинку на задний фон страницы, чтобы она заполнила экран полностью? Этот код не помог:
У каждого браузера есть свои дефолтные стили для тех или иных элементов. Потому у вас по краям есть отступы
Если вы не хоте что бы картинка повторялась по оси Y или оси Х, тогда нужно добавить ещё background-repeat: no-repeat;
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.5.24.43458
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать изображение фоновым в html
Фон элемента описывается в CSS свойством background . Фактически это свойство представляет сокращение набора следующих свойств CSS:
background-color : устанавливает цвет фона
background-image : в качестве фона устанавливается изображение
Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png .
Также можно использовать абсолютные адреса URL, например:
Либо можно использовать относительные адреса — относительно html-документа или корневого каталога сайта:
background-repeat : устанавливает режим повторения фонового изображения по всей поверхности элемента
background-size : устанавливает размер фонового изображения
background-position : указывает позицию фонового изображения
background-attachment : устанавливает стиль прикрепления фонового изображения к элементу
background-clip : определяет область, которая вырезается из изображения и используется в качестве фона
background-origin : устанавливает начальную позицию фонового изображения
Первый блок окрашен в оттенок красного цвета, а второй блок устанавливает в качестве фона изображение. Все содержимое блока накладывается поверх фона:
Повторение изображения
На выше приведенном скриншоте видно, что CSS должным образом масштабирует изображение, чтобы наиболее оптимально вписать его в пространство элемента. Однако в связи с масшатбированием изображение может не полностью покрывать поверхность элемента, и поэтому для полного покрытия автоматически CSS начинает повторять изображение.
С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:
repeat-x : повторение по горизонтали
repeat-y : повторение по вертикали
repeat : повторение по обеим сторонам (действие по умолчанию)
space : изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов
round : изображение должным образом масштабируется для полного заполнения всего пространства
no-repeat : изображение не повторяется
Размер изображения
Свойство background-size позволяет установить размер фонового изображения. Для установки размера можно использовать либо единицы измерения, например, пиксели, либо проценты, либо одно из предустановленных значений:
contain : масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение
cover : масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение
auto : значение по умолчанию, изображение отображается в полный размер
Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:
Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:
Можно задать точное значение для одного измерения — ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:
Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности:
Позиция изображения
Свойство background-position управляет позицией фонового изображения внутри элемента. Оно может принимать отступы от верхнего левого угла элемента в единицах измерения, например, в пикселях в следующем формате:
Кроме того, данное свойство может принимать одно из следующих значений:
top : выравнивание по верхнему краю элемента
left : выравнивание по левому краю элемента
right : выравнивание по правому краю элемента
bottom : выравнивание по нижнему краю элемента
center : изображение располагается по центру элемента
Здесь изображение выравнивается по верху и правому краю, то есть будет располагаться в правом верхнем углу элемента.
background-attachment
Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:
fixed : фон элемента фиксирован вне зависимости от прокрутки внутри элемента
local : по мере прокрутки внутри элемента фон изменяется
scroll : фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов
background-origin
Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:
border-box : фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border
padding-box : фон устанавливается с учетом внутренних отступов
content-box : фон устанавливается по содержимому элемента
Используем все три значения:
background-clip
Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:
border-box : изображение обрезается по границам элемента
padding-box : из изображения исключается та часть, которая находится под границами элемента
content-box : изображение обрезается по содержимому с учетом внутренних отступов
Например, если к предыдущей разметке мы применим следующие стили:
Тогда мы получим следующий результат:
Свойство background
Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:
Фон для сайта CSS/HTML
В этом разделе найдутся полезные подсказки, как можно красиво оформить фон для сайта. Фон может быть картинкой, градиентом, прокручиваться и повторяться, может быть и анимированным, в зависимости от того, чего требуется в дизайне.
Как сделать фон для сайта CSS
Фон для сайта цветом можно сделать с помощью свойства background, применив его к тегу body. Таким же образом можно задать фон и другим элементам на сайте. Для примера, создадим div и применим к нему свойство background с цветом.
Пример
Как сделать фон картинкой на весь экран CSS
Для того, чтобы сделать фон картинкой на весь экран, необходимо использовать свойство background-image. Чтобы картинка была на всю ширину фона, нужно в объявлении прописать значение cover. Для примера создадим div, а для фона сайта нужно прописать свойство к тегу body.
Пример
Как сделать фон размытым CSS
Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.