Как вставить картинку поверх фона в html

background-image

Свойство CSS background-image устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.

Границы border элемента затем рисуются поверх них, и background-color рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами background-clip и background-origin .

Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none .

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

Синтаксис

Значения

Это ключевое слово обозначает отсутствие изображений.

<image> (en-US) обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживаетсянесколько фонов (en-US) .

Официальный синтаксис

Примеры

Несколько фонов и прозрачность

Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.

background-color поверх background-image в body

но цвет при загрузке страницы лежит под картинкой, как расставить для них приоритеты?

Попробуйте добавить свойство background-blend-mode . (Не работает в IE, Edge и Opera Mini.)

Свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.

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

На момент публикации вопроса (23.06.2016), такие возможности CSS, как множественный фон и linear-gradient, уже поддерживались всеми основными браузерами, даже без префиксов. Потому странно видеть, что отсутствует самое очевидное решение:

Используя такой способ, можно добавлять сколько угодно градиентов и изображений (особенно интересно, если комбинировать изображения с прозрачными областями — например, формата PNG).

Как разместить background поверх тега img.

В этой статье описано, как разместить фоновое изображение над изображением заключенное в тег img. Это даже звучит странно, ведь свойство background предназначено, для отображения на фоне всего остального. Такова логика этих вещей и z-index, разумеется, здесь не работает.

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

Этим примером я не претендую на оригинальность — просто один из возможных вариантов решения данного вопроса.

Пример основан на изображении выступающего в роли привью к видео и YouTube значком проигрывания. Значок взят здесь https://www.youtube.com/yt/brand/downloads.html. А в качестве изображения использована реальная привьюшка от видео на ТыТруба.

и краткое пояснение его css части.

В описанном примере для правила front-yt-icon имеет значение как позиционирование, так и блочное отображение. Высота и ширина заданна только для того, чтоб определить в каких рамках должен отображаться элемент.

Для его псевдо-элемента, так же важно позиционирование, но уже абсолютное и нулевое расстояние от границ. И конечно работает центрирование бекграунда. Hover добавлен сугубо для правдоподобия.

Как вставить картинку поверх фона в 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 в формате: