Как вставить изображение в html на фон

Как добавить фоновое изображение

В этой статье мы покажем, как добавить и позиционировать фоновое изображение в 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.

Как работать с фоновыми картинками в CSS

Три примера вёрстки, которые встречаются часто и пригодятся наверняка.

При разработке сайта верстальщик должен отличать контентные (информативные) изображения от декоративных.

Контентные изображения связаны со структурой и смысловым наполнением страниц. Они содержательны, поэтому их вставляем в разметку.

Декоративные изображения — это элементы оформления: разделители, маркеры, значки, фоны и так далее. Они не несут полезной информации для пользователя, поэтому их задаём средствами CSS . Так мы избавляем HTML-документ от всего лишнего.

Пример явно декоративных изображений — пиктограммы («иконки») и фоновые картинки. Научимся их верстать с помощью CSS-свойства background.

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook*, «ВКонтакте», Instagram* и другие соцсети:

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

• Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
• Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ , чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

• Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
• Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
• А вот фоновые изображения у нас разные — их мы задаём в разных классах.

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

Иконка рядом с текстом

Такие иконки с фоном встречаются в контактах на сайте. Мы вешаем ссылку на email, а для наглядности добавляем пиктограмму.

На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

Сперва ничего особенного — обычная ссылка:

Вся магия в CSS:

• Сначала задали путь до изображения.
• Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
• Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.

• И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и HTML-элемента, где она задана фоном).

Что же мы получили:

Не совсем то, чего ожидали. Давайте разбираться.

Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

Делается это с помощью свойства padding (внутренний отступ).

Добавим в код такой отступ слева:

Вот теперь всё вышло как надо:

На заметку: этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа — меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.

Блок с контентом поверх фонового изображения

Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст. Давайте разбираться, как такое сделать.

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

Однако мы не всегда знаем заранее, сколько контента будет внутри блока — не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки — и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.

Создаём простую HTML-разметку:

Главное у нас снова в CSS:

• Чтобы даже при увеличении текста ничего не сломалось — применяем внутренний отступ (padding). Таким образом уходим от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться.
• Устанавливаем background-repeat в no-repeat. По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок, а нам такого не нужно.
• Задаём background-position: center — выравниваем картинку по центру контейнера (как по вертикали, так и по горизонтали).
• А теперь самое важное — масштабируем фон. Задаём свойству background-size значением cover. Это и позволит нашей картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся).

Вот мы и сделали фон адаптивным.

Что дальше?

Например, поучитесь верстать картинки формата SVG.

* Решением суда запрещена «деятельность компании Meta Platforms Inc. по реализации продуктов — социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности.

CSS (англ. Cascading Style Sheets, «каскадные таблицы стилей») — формальный язык описания внешнего вида документов, структурированных с помощью языка разметки (чаще всего HTML или XHTML).

Размер такого элемента равен его содержимому с учётом значений margin, border и padding.

БЭМ («Блок», «Элемент», «Модификатор») — базовые понятия для описания интерфейса любой сложности в одноимённой методологии web-разработки, которая позволяет использовать CSS/HTML/JS много раз.

Padding (внутренний отступ) – это отступ от края блока до его содержимого. То есть пространство между содержимым элемента и его границей.

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

Узнать про курс

Профессии с трудоустройством

• Графический дизайнер
• Python-программист
• Инженер по тестированию
• Бизнес-аналитик
• Интернет-маркетолог 2023

Новости

+7 (499) 444-90-36 Отдел заботы о пользователях

Москва, Ленинский проспект, дом 6, строение 20

• Премии Рунета 2018, 2019, 2020

• Все направления

• О Skillbox

• Вебинары

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies ��

Как сделать фоновую картинку в HTML

Верстка HTML и CSS

Изображения могут придать странице более привлекательный вид. Одним из таких способов сделать страницу более привлекательной является добавление на нее фонового изображения. Добавить фоновое изображение в HTML можно двумя способами: атрибутом Background (HTML) или через CSS. Но прежде чем мы начнем изучать различные методы добавления фонового изображения в HTML, давайте пройдемся по списку тем, перечисленных в оглавлении, которые мы рассмотрим в этой статье.

Как добавить фоновое изображение в HTML

Добавить фоновое изображение в HTML можно двумя способами:

• Атрибут Background (HTML)
• Внутренняя таблица стилей (CSS)

Давайте подробно рассмотрим каждый из этих методов в следующем разделе.

Атрибут фона

Если вы хотите добавить фоновое изображение в HTML с помощью атрибута background, выполните следующие действия:

• Откройте HTML-файл в текстовом редакторе.
• В начальном теге <body> вашего HTML-файла введите <Body background=»»> .
• Укажите путь к изображению, которое мы хотим добавить. (например, <Body background=»C:\Users\Downloads\infoedge.jpg»> .
• Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл:

Когда вы выполните этот код, результат будет выглядеть следующим образом:

“C:\Users\Downloads\infoedge.jpg”, это путь к изображению, где оно было сохранено на устройстве. Замените путь в соответствии с расположением файла, сохраненного на вашем устройстве. А если вы хотите добавить изображение из интернета, используйте для этого URL-адрес изображения.

Внутренняя таблица стилей (CSS)

Если вы хотите добавить фоновое изображение с помощью внутренней таблицы стилей (CSS), выполните следующие действия:

• Откройте HTML-файл в текстовом редакторе.
• После закрытия тега <title> в HTML-документе определите начальный и конечный теги тега <style> .Введите в тег style свойство элемента body , а затем свойство backgroud-image .
• Сохраните HTML-файл в текстовом редакторе и запустите его.

Давайте рассмотрим пример, чтобы лучше понять шаги. Вот HTML-файл, созданный в соответствии с приведенными выше шагами:

Когда вы выполните этот код, результат будет выглядеть следующим образом:

В приведенном выше HTML-коде мы использовали изображение из Интернета, используя URL-адрес изображения.

Как повторить фоновое изображение в HTML?

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

Если вы не хотите, чтобы фоновое изображение повторялось, установите свойство background no-repeat .

Как покрыть весь элемент фоновым изображением в HTML?

Чтобы покрыть фоновым изображением весь элемент, можно установить свойство background-size в значение cover . А если вы не хотите, чтобы изображение растягивалось, можно задать свойству background-attachment значение fixed . Это позволит охватить весь элемент или страницу без растягивания.

Давайте рассмотрим пример, чтобы лучше понять это:

На выходе получится примерно следующее:

В этой статье мы рассмотрим, как добавить фоновое изображение в HTML. Если остались вопросы, задавайте их в комментариях ниже.

Как вставить изображение в html на фон

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Как вставить картинку в HTML. Основы HTML для начинающих. Урок №5

Всем привет!
Продолжаем усердно изучать основы HTML.
В этом уроке я расскажу, как вставить картинку в HTML-документ, как сделать картинку фоном, размер картинки, обтекание картинки текстом, как выровнять картинку. Все перечисленные возможности буду закреплять примерами и результатами.
Итак, изображения на веб-страницах могут быть как фоновые, так и обычные. Какая разница между фоновым и обычным изображением?

Фоновое изображение размещается в качестве фона, наверх которого можно вставить другие картинки, текстовку, таблицу и т.д.

Обычное изображение будет отталкивать от себя другие элементы страницы (другие картинки, текстовку, таблицу и т.д.). На примере вы потом все увидите и поймете.
Для веб-страниц рекомендуется использовать форматы картинок JPEG (JPG) , GIF и PNG .

○ Как сделать картинку фоном в HTML

Чтобы сделать картинку фоном, для тега <body> нужно прописать атрибут «background» :

Теперь смотрим полный пример. Вставьте файл картинки «fon.jpg» рядышком с HTML файлом.

и в HTML файл вставьте вот этот код:

Результат будет таким:

Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.

Не правильное название:

○ Как вставить картинку в HTML

Чтобы вставить картинку в HTML-документ, используют тег <img> с параметром «src» , которое определяет путь или адрес к картинке.

Теперь смотрим полный пример. Вставьте файл картинки «kartinka.jpg» рядышком с HTML файлом и в HTML файле пропишите вот этот код:

Результат будет таким:

Внимание: название картинки должно быть написано на латинице, иначе картинка не отобразится.

Не правильное название:

Я думаю, вы до этого момента все поняли. Теперь попробуем скомбинировать два примера вместе. Сделаем на веб-странице фон, вставим изображение и текст.

○ Как вставить картинку, если она находится в папке «img» или «images»?

Если картинка находится в папке «img» или «images» , тогда нужно указать путь от HTML файла к папке «img» или «images» , а потом уже только прописать название картинки с расширением. Выглядеть это будет вот так:

Если картинка находится на другом сайте или блоге, тогда нужно указать адрес сайта и, если нужно, папку, где находится картинка. Ну, естественно, нужно указать и название изображения с его расширением.

Задание: Попробуйте создать папку с любым названием (только на латинице), закачать в папку картинку и в HTML файле указать правильный путь к изображению так, чтобы все отобразилось. Пробуйте!

○ Как сделать картинки в HTML по центру.
Чтобы картинка разместилась по центру HTML документа, заключите тег картинки в известный вам тег <center></center>

○ Как сделать обтекание или выравнивание картинки в HTML

К тегу <img> нужно добавить атрибут «align» .

Значение атрибута «align» :

left – выравнивание по левому краю, текст будет обтекать справа ( align=»left» ).
right – выравнивание по правому краю, текст обтекает слева ( align=»right» ).

○ Как сделать отступы от картинки в HTML

Чтобы сделать отступы от картинки, к тегу <img> нужно добавить атрибут «hspace» и «vspace» . Параметры задаются цифрами и в пикселях

HSPACE — отступы от картинки по горизонтали (в пикселях) ( hspace=»15″ ).
VSPACE — отступы от картинки по вертикали (в пикселях) ( vspace=»15″ ).

○ Как установить размер картинки в HTML

Чтобы задать размер картинке, к тегу <img> нужно добавить атрибут «height» и «width» . Параметры задаются цифрами и в пикселях или в процентах.

HEIGHT — высота изображения ( height=»100″ ).
WIDTH — ширина изображения ( width=»50″ ).

○ Как установить рамку для картинки в HTML

Чтобы задать рамку для картинки, к тегу <img> нужно добавить атрибут «border» . Параметры задаются цифрами и в пикселях.

Если задать к атрибуту «border» параметр « 0 », рамка отображаться не будет.

○ Дополнительные атрибуты для картинок

Title — это заголовок картинки. Заголовок отображается в том случае, если вы наведете на картинку курсор мышки.

Если у пользователя отключен режим загрузки изображений, то вместо картинки ему загрузится иконка с символикой, что картинки нет (на разных браузерах иконка разная). Можно в таком случае написать подсказку для пользователя, подписав картинку. Для этого используется параметр «alt» .
Текст, который прописан в «alt» , будет отображаться вместе с иконкой.
Смотрите пример:

Вот и все! Теперь попробуем все то, что я написал в уроке использовать на веб странице.

Вот, что я сделал для вас с использованием уже известных для вас атрибутов: