Как поставить картинку в качестве заднего фона для body?
Как мне поместить картинку на задний фон страницы, чтобы она заполнила экран полностью? Этот код не помог:
body
Отслеживать
задан 3 мая 2020 в 14:46
177 1 1 серебряный знак 13 13 бронзовых знаков
Можно просто надо убрать внешние отступы у body с помощью margin: 0 ?
3 мая 2020 в 14:50
background-image
3 мая 2020 в 14:59
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
*, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; >body < background: url(https://picsum.photos/1000/800) no-repeat center; -webkit-background-size: cover; background-size: cover; min-height: 100vh; >h1
Контент на странице
Отслеживать
ответ дан 3 мая 2020 в 15:46
Михаил Камахин Михаил Камахин
8,674 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
У каждого браузера есть свои дефолтные стили для тех или иных элементов. Потому у вас по краям есть отступы
body
Если вы не хоте что бы картинка повторялась по оси Y или оси Х, тогда нужно добавить ещё background-repeat: no-repeat;
body < width: 100vw; height: 100vh; margin: 0; padding: 0; background: url(https://ak5.picdn.net/shutterstock/videos/16547275/thumb/1.jpg) no-repeat; background-size: cover; position: relative; >h1
ищ EXEMPLE
Отслеживать
ответ дан 3 мая 2020 в 15:48
2,152 11 11 серебряных знаков 28 28 бронзовых знаков
- html
- css
- css3
- html5
- веб-программирование
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как добавить фоновое изображение в HTML
wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).
Количество просмотров этой статьи: 51 756.
В этой статье:
Чтобы добавить изображение на веб-страницу, понадобится HTML, а чтобы картинку сделать фоном веб-страницы, необходимы HTML и CSS. HTML (язык гипертекстовой разметки) является стандартизированным языком разметки документов, который указывает браузеру, что отображать на веб-странице. [1] X Источник информации CSS (каскадные таблицы стилей) — это язык описания внешнего вида документа, который используется для изменения внешнего вида и макета веб-страницы. [2] X Источник информации Вам понадобится изображение, которое вы установите в качестве фона веб-страницы.
Часть 1 из 5:
Как создать папку и файл
- Имя папки может быть любым, но лучше, если оно будет состоять из одного короткого слова.
- Если вы не очень заботитесь о том, как ваш сайт будет открываться на старых устройствах или на устройствах с медленным интернет-соединением, используйте изображение с более высоким разрешением. В качестве фона также подойдет изображение с простым повторяющимися узором, потому что на нем будет хорошо виден текст.
- Если у вас нет изображения, бесплатно скачайте его в интернете и скопируйте в созданную папку.
- Можно использовать любой текстовый редактор, например, Блокнот в Windows или TextEdit в Mac OS X.
- Если вы хотите использовать текстовый редактор, предназначенный для работы с HTML, скачайте редактор Atom, который поддерживает Windows, macOS и Linux.
- Если вы используете TextEdit, перед тем, как начать писать HTML-код, откройте меню «Формат» и выберите «Конвертировать в простой текст». В этом случае HTML-файл будет правильно загружаться в веб-браузере.
- Мощные текстовые редакторы, такие как Microsoft Word, не очень хорошо подходят для написания HTML-кода, потому что они добавляют невидимые символы и форматирование, которые могут воспрепятствовать правильному отображению содержимого HTML-файла в веб-браузере.