Как вставить фоновое изображение в HTML с помощью Блокнота [Обновлено]

Описание: Привет, ребята!
В этом видеоуроке мы научимся вставлять фоновое изображение в HTML с помощью Блокнота.

Откроем Блокнот (также можно использовать другие текстовые редакторы или редакторы кода, такие как Notepad++, Sublime и Visual Studio Code).

ИСХОДНЫЙ КОД: https://www.programminghead.com/how-t...

В Блокноте сначала нужно написать HTML-код.
Теперь нужно сохранить этот файл без имени.

Для этого выберите файл.
Сохраните и укажите место, куда хотите сохранить файл.
Сохраним его на рабочем столе.
Дайте ему имя и расширение .html.

Index — имя файла, а .html — расширение HTML-файла.

Нажмите «Сохранить», и вы увидите, что HTML-файл доступен на рабочем столе.

Далее нам нужно добавить изображение в качестве фона, для чего нам понадобится CSS.
Существует множество способов использовать CSS в HTML. (Как встроенный CSS, внутренний CSS и внешний CSS)
В этом руководстве мы будем использовать внутренний CSS.

Между начальным и закрывающим тегами тега HEAD нам нужно добавить теги стилей.

Между этими тегами стилей мы можем использовать свойства CSS.

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

Используем имя тега для выбора HTML-тела. Между фигурными скобками нам нужно прописать свойства CSS.

Добавим свойство background-color и установим цвет фона на красный.

Это изменит цвет фона нашей веб-страницы с белого на красный.

Теперь вместо свойства Backgorund-color мы будем использовать свойство background-image для добавления изображения в качестве фона.

А в методе url() нам нужно указать источник изображения.

Если ваш файл изображения и HTML-файл находятся в одном месте,
то вы можете просто использовать имя изображения и расширение изображения. Если вы не видите расширение,
выберите изображение.
Щелкните правой кнопкой мыши и выберите «Свойства», и здесь вы увидите тип изображения или расширение изображения.

Если вы используете изображения из разных мест, вам необходимо указать ПОЛНЫЙ путь к ним. (Кстати, у нас есть специальное видео о вставке изображений из разных папок и т.д., поэтому в описании вы можете найти ссылку и посмотреть это видео, но здесь я предполагаю, что файл изображения и HTML-файл находятся в одном месте.)

Теперь сохраните HTML-файл и откройте его в веб-браузере.

Как видите,
у нас несколько изображений. Поскольку одно изображение не может заполнить весь фон, оно повторяет фоновое изображение несколько раз, заполняя всю область.

Если вы этого не хотите, то можете использовать свойство CSS:
background-repeat: no-repeat;
Это гарантирует, что наше фоновое изображение не будет повторяющимся.

Сохраните и обновите страницу браузера.

Мы исправили проблему с повторяющимся изображением, но остались некоторые пустые места, которые нужно заполнить.
Поэтому, чтобы покрыть всю область Body, мы можем использовать свойство CSS
background-size:
Здесь мы можем указать размер фонового изображения.
Например, я хочу использовать 100% ширины, но только 10% высоты.
Сохраните и обновите страницу.
Теперь вы видите, что моё изображение занимает 100% ширины, но только 10% высоты.
То есть, если мы также используем 100%, это покроет всю область Body, верно? Верно, но это растянет наше изображение, чтобы заполнить всю область на экранах разных размеров, что может испортить соотношение сторон изображения.

Чтобы исправить это, мы можем использовать автоматическую высоту или ширину в зависимости от области просмотра, или использовать свойство Cover.

Это автоматически расположит фоновое изображение так, чтобы оно заполняло или закрывало всю область, и это не испортит соотношение сторон изображения.

Проблема в том, что на некоторых экранах фоновое изображение не выравнивается по центру.
Чтобы исправить это, мы можем использовать свойство
background-positon: center;

Теперь на экранах всех размеров наш фон будет выровнен по центру.

Выглядит хорошо.
Но если мы увеличим содержимое страницы таким образом,

Вы увидите, что теперь наш фон также прокручивается.

Если вы не хотите, чтобы фон прокручивался,
то вы можете использовать свойство CSS
background-attachment: fixed; Это решит эту проблему.

Большое спасибо за просмотр этого видео! Если у вас возникнут какие-либо проблемы, пожалуйста, сообщите нам об этом в комментариях.
Ещё раз спасибо за просмотр, хорошего дня.

Ссылки:
Не загружаются изображения?
Ссылка на видео (Как вставить аудио из разных папок)
   • Audio in HTML - How to Insert audio withou...  
Вы всё ещё можете использовать это видео, чтобы понять, как вставлять изображения из разных папок (поэтому процесс добавления изображений и аудио практически одинаков).

Видеоконтент
0:00 Видео-введение (Как вставить аудио в HTML с помощью Блокнота)
0:15 Синтаксис HTML
1:06 Использование встроенного CSS для фона
1:24 Выбор BODY с помощью имени тега
1:49 Использование свойства CSS background-image
2:12 Получение расширения изображения
2:47 Предотвращение повторения фонового изображения
3:14 Заливка всего фона
4:25 Выравнивание фонового изображения
4:57 Зафиксиро...