Как вставить картинку поверх фона в html
Перейти к содержимому

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

  • автор:

Как добавить фоновый рисунок на веб-страницу?

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .

Общий синтаксис добавления фона следующий.

 body 

Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif) .

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

Пример 1. Добавление фона

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Фон   

.

В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

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

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

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

body < background-blend-mode: multiply; background-image: url(//i.stack.imgur.com/1ffAS.jpg); background-position: top; background-repeat: no-repeat; background-size: cover; background-color: rgba(255, 0, 0, 0.5); >

Отслеживать
ответ дан 25 июн 2016 в 18:32
Gleb Kemarsky Gleb Kemarsky
7,274 2 2 золотых знака 22 22 серебряных знака 45 45 бронзовых знаков

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

body < /* Указав одинаковые значения цветов градиента, получаем однотонную заливку */ background-image: linear-gradient(rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0.5)), url(https://i.stack.imgur.com/m9kuJ.jpg); background-position: top; background-repeat: repeat, no-repeat; background-size: auto, cover; >

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

body < /* Указываем высоту и убираем отступы. */ min-height: 100vh; margin: 0; background-image: /* Самый верхний слой. */ url(https://i.imgur.com/pCm96IG.png), linear-gradient(#ffff, #fff1, #ffff), linear-gradient(to top, #00f0, #00f8), linear-gradient(to left, #0800, #0808), linear-gradient(to bottom, #fa00, #fa08), linear-gradient(to right, #f000, #f008), /* Самый нижний слой. */ url(https://i.stack.imgur.com/m9kuJ.jpg); /* Когда слоёв много, рекомендую задавать позицию и размер каждому слою - меньше путаницы. Значения задаются в том же порядке, в каком находятся слои в background-image. */ background-position: center 5vh, center 43.4vh, 0% 100%, 100% 100%, 100% 0%, 0% 0%, top; background-size: auto 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, 40vw 40vh, cover; /* Если какое-то свойство гарантированно одинаковое для всех слоёв, то можно задать его, как общее. */ background-repeat: no-repeat; >

Отслеживать
ответ дан 24 дек 2020 в 16:40
33k 6 6 золотых знаков 29 29 серебряных знаков 71 71 бронзовый знак

body < position: relative; min-height: 620px; background-image: url("../img/mnogoetazhka-%5B1600x1200%5D-%5B32918977%5D.jpg"); >body::before

Отслеживать
ответ дан 23 июн 2016 в 13:48
86 7 7 бронзовых знаков

Бывает так, что фоновая картинка задана элементу при помощи атрибута style . Для возможности редактирования фона из админки например. Тогда множественный background не подходит и можно использовать вариант с внутренней тенью.
box-shadow в браузерах 16 года имел хорошую поддержку.

body
    Document   

Отслеживать
ответ дан 24 дек 2020 в 17:08
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков

«Тогда множественный background не подходит. « Это почему же? Пишем background-image: url(. ) !important; и обходим style. При редактировании в админке, как правило, отсутствует возможность добавлять !important.

2 фев 2021 в 8:13

@UModeL , но ведь background-image: linear-gradient(полупрозрачный), url(. ) !important в файле стилей полностью заменит собой значение в атрибуте. Будет принудительно использоваться картинка, которая указана в url в файле стилей. А вывод типа

Например, чтобы установить картинку «background.jpg» в качестве фона для элемента body , можно использовать следующий код:

 body  background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; >  

В этом примере свойство background-image задает путь к файлу изображения. Свойство background-repeat устанавливает, как изображение будет повторяться. Тут мы устанавливаем значение no-repeat , чтобы изображение не повторялось. Свойство background-size устанавливает размер изображения. В данном примере мы устанавливаем значение cover , чтобы изображение занимало всю доступную область и сохраняло свои пропорции.

Как вставить картинку в материал, чтобы текст был поверх нее?

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

Может стоит установить другой редактор, в котором больше возможностей, если да, то какой?

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

Администратор
11 года 11 мес. назад #2253 от Wedal

ailos, нужно просто подучить html и CSS. В редакторе откройте исходный код, создайте DIV-контейнер c шириной и высотой, равными ширине и высоте вашего изображения-фона, затем через CSS или тег STYLE добавьте background(вашу картинку) к этому контейнеру. После этого вы увидите его в редакторе и сможете писать поверх картинки что захотите.

Спасибо сказали: ailos

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

ailos / Автор темы \
11 года 11 мес. назад #2271 от ailos

Спасибо большое Wedal. А есть ли редактор вместо Редактор — TinyMCE который это сам делает?
«нужно просто подучить html и CSS» — это то надо, вот и изучаем по мере необходимости, вот только не всегда понятно где искать и не всегда есть ответы по конкретному вопросу, а изучать полностью html и css нет времени. Благо есть ваш форум)))

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

Администратор
11 года 11 мес. назад #2283 от Wedal

ailos, не знаю насчет «сам делает». Мне проще и быстрее сделать так, как я описал. А вообще, лично я пользуюсь только редактором JCE. У него очень хороший функционал и настраиваемость.

Спасибо сказали: ailos

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

ailos / Автор темы \
11 года 11 мес. назад — 11 года 11 мес. назад #2286 от ailos

У меня в редакторе выдает бэграунд и текст плохо виден, на самом сайт сверху накладывается одноцветный тон, а редактор его не вставляет((( Стили можно самому создавать? Чтобы в одном стиле потом весь сайт заполнять. Именно в стиле как в Word, шрифт, размер и цвет. JCE может стили с CSS шаблона применять. Я их применил для эксперимента, потом замучился удалять, только через html удалилось. Мучаюсь, что шрифты одинаковые были. Тем более если выводятся на страницу тексты с разных статей.

Последнее редактирование: 11 года 11 мес. назад от ailos .

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *