Найти в Дзене

Картинка в качестве фона для сайта в HTML

С таким видом фона можно частенько встретиться на различных сайтах посвященных онлайн-просмотрам. В этой статье мы научимся создавать фон, который будет заполнять собой всю html-страницу. Шаг 1 Создаем html-страницу и называем ее index. Шаг 2 Скачиваем какую-нибудь картинку с фотостока и сохраняем ее в папке img (название картинки желательно написать на английском, например: "fon"). Шаг 3 Далее открываем нашу html-страницу и нажимаем клавишу F12. Перед нами откроется окно для редактирования кода. В открывающем теге body необходимо прописать css-свойство background и указать его значение (в данном случае это путь к ранее сохраненному изображению). Вот что у Вас должно получиться: Шаг 4 Обновите страницу и посмотрите на результат. В моем случае это выглядит вот так: В Вашем случае это может выглядеть по-другому (все зависит от выбранной картинки). Но это еще не все. Теперь давайте попробуем сделать тоже самое используя внутреннюю таблицу стилей (при этом внутри отрывающего тега body ниче
Оглавление
Фото автора Format: Pexels
Фото автора Format: Pexels

С таким видом фона можно частенько встретиться на различных сайтах посвященных онлайн-просмотрам. В этой статье мы научимся создавать фон, который будет заполнять собой всю html-страницу.

Шаг 1

Создаем html-страницу и называем ее index.

Шаг 2

Скачиваем какую-нибудь картинку с фотостока и сохраняем ее в папке img (название картинки желательно написать на английском, например: "fon").

Шаг 3

Далее открываем нашу html-страницу и нажимаем клавишу F12. Перед нами откроется окно для редактирования кода. В открывающем теге body необходимо прописать css-свойство background и указать его значение (в данном случае это путь к ранее сохраненному изображению). Вот что у Вас должно получиться:

-2

Шаг 4

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

-3

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

Но это еще не все. Теперь давайте попробуем сделать тоже самое используя внутреннюю таблицу стилей (при этом внутри отрывающего тега body ничего не прописывается).

Шаг 1

Между открывающим и закрывающим тегом head прописываем вот такой код:

<style>

body {

background-image: url("img/fon.jpg");}

</style>

Наглядный пример:

-4

Шаг 2

Обновляем страницу и получаем тот же самый результат:

-5

Шаг 3

Сохраняем страницу дабы не начинать прописывать код сначала.

Спасибо за внимание!

Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)

Если статья оказалась полезной предлагаю подписаться на канал.