Содержание

seodon.ru | Теги HTML — Тег BODY

  • <BODY>Aтрибуты
  • Личные:
  • alink
  • background
  • bgcolor
  • bgproperties
  • bottommargin
  • leftmargin
  • link
  • rightmargin
  • scroll
  • text
  • topmargin
  • vlink
  • Общие:
  • accesskey
  • class
  • dir
  • id
  • lang
  • style
  • tabindex
  • title

Опубликовано: 25.06.2010 Последняя правка: 08.12.2015

Атрибут background, тега <BODY>, задает путь к изображению, которое будет фоном страницы. Если изображение меньше размеров страницы, то оно дублируется, начиная с верхнего левого угла, по горизонтали и вертикали, пока не «замостит» всю страницу. Как правило, для этого используются небольшие рисунки с размером в несколько десятков пикселей, так как браузеры загружают изображение один раз и потом, для «размножения», берут его из кэша. А также используются форматы JPG, GIF или PNG, которые хорошо сжимают графику.

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

Если вы используете background, то всегда указывайте и bgcolor, на тот случай, если в браузере отключен показ изображений.

Значения

Значением атрибута является указание абсолютного или относительного пути (URL) к изображению.

Значение по умолчанию: нет.

Синтаксис

<body background="URL">...</body>

Обязательный атрибут: нет.

Пример HTML: применение атрибута background

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - Тег BODY, атрибут background</title>
 </head>
 <body background="images/fon.jpg" text="#CC9966">
  <p>Изображение для этого фона можно посмотреть
   <a href="images/fon.
 
 jpg">ЗДЕСЬ</a></p>
 </body>
</html>

Результат примера

Результат. Применение атрибута background.

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ЧастичноНетЧастичноНет

В HTML 4.01 и XHTML 1.0 использовать атрибут background допускается только с <!DOCTYPE> Transitional и Frameset, в противном случае будет невалидный код. А вообще рекомендуется применять стили (CSS).

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

background атрибут HTML теґа body

  • Головна
  • html
  • теґи
  • <body>
  • background

Атрибут background вказує фонове зображення для документа.

Для нього не потрібно вказувати ширину та висоту, бо зображення займає весь простір вікна. Якщо зображення меньше розміру вікна браузера, тоді воно повторюється праворуч і вниз. Тому треба дбати про те, щоб краї зображення при складанні «мозаїки» були без видимих країв.

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

<body background="URL">

Атрибут background може отримувати єдине значення :

URL

URL-адреса фонового зображення. Можливі значення:

  • Абсолютний URL — вказує на інший сайт (як href=http://www.example.com/bgimage.gif).
  • Відносний URL — вказує на файл в межах веб-сайту (як href=»/images/bgimage.gif»).

Переглядачі

  • Стаціонарні переглядачі
  • Мобільні переглядачі
Переглядач

1+

1+

1+

3. 5+

2+

12+

Переглядач

1+

1+

1+

1+

Приклади

  • Приклад 1

Найпростіший приклад використання HTML атрибута background теґа <body>




  See the Pen 


  Body_background_css_in_ua by css. in.ua (@css_in_ua)


  on CodePen.

Різниця між HTML 4.01 та HTML5

Атрибут background для тега <body> не підтримується у HTML5. Користуйтесь для цього CSS.

Різниця між XHTML та HTML

Немає жодної різниці.

HTML Фоновое изображение в полноэкранном режиме без CSS

Последнее обновление: 9 апреля 2023 г.

IN — HTML

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

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

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

Пошаговое руководство по HTML Фоновое изображение Полноэкранный режим без CSS :-

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

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

 

<голова>
 Название документа<title>
</голова>
<body background-image="demo10/logo.jpg" background-repeat="no-repeat" background-size="cover">
</тело>
</html> </pre><center><ins class="adsbygoogle"
 style="display:block; text-align:center;"
 data-ad-layout="in-article"
 data-ad-format="fluid"
 data-ad-client="ca-pub-1812626643144578"
 data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><ol><li> Сначала мы пишем <! DOCTYPE html>, который мы использовали как указание веб-браузеру о том, в какой версии HTML-файла записан файл.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.ytimg.com/vi/QQj-ULba4_0/maxresdefault.jpg' /><noscript><img loading='lazy' src='/800/600/https/i.ytimg.com/vi/QQj-ULba4_0/maxresdefault.jpg' /></noscript></li><li> Во-вторых, тег<html> используется для обозначения начала HTML-документа.</li><li> Как и выше, теперь тег<head> используется для хранения информации о веб-странице. В этом теге используется тег<title>, который помогает нам указать заголовок веб-страницы. Оба тега<head> и<title> являются парными тегами. Таким образом, у обоих есть закрывающие теги</head> и соответственно.
  •  В-третьих, тег используется для определения тела веб-страницы. Все содержимое для отображения на веб-сайте написано здесь. Здесь мы создаем тег body, но вы обнаружили, что в теле нет тега изображения img. Это потому, что мы хотим установить изображение в качестве фона веб-страницы. Итак, мы используем атрибуты html здесь, в теге body, и не используем какое-либо свойство CSS.
    •  
  •  Первым свойством, используемым здесь, является фоновое изображение, оно используется для установки изображения в качестве фона. URL-адрес изображения указан в значении.
  •  Следующий используемый атрибут — background-repeat, который уже обсуждался в предыдущем сеансе.
     
     Это используется для того, чтобы наше изображение не повторялось снова и снова.
  •  Последний и самый важный атрибут, используемый здесь, это background-size, с помощью этого атрибута изображение фиксируется в фоне и не меняется само при увеличении и уменьшении веб-страницы. Значение, которое дается, является покрытием.
  •  Все это делается с помощью встроенных атрибутов html. За этим html-кодом нет никакого дополнительного кода CSS.
  •  Наконец, теги и закрываются с помощью  и соответственно.
    •  Заключение :- 
     В заключение, здесь мы можем сказать, что теперь вы можете установить изображение в качестве фона на весь экран.
     Размер может быть любым размером экрана, и этот код поможет вам покрыть весь экран без каких-либо проблем с размером экрана. Я надеюсь, что этот урок по полноэкранному фоновому изображению HTML без CSS поможет вам.
     
     Как разделить фон на 2 цвета с помощью CSS | Мигель Нуньес 
     Как разделить фон на 2 цвета с помощью CSS | Мигель Нуньес | Medium  Чтение: 3 мин.
     ·
     3 февраля 2022 г.
     В этом уроке я научу вас, как разделить фон на два цвета. Не волнуйтесь, это очень просто и не требует сложного кода. Давайте начнем.
      CSS: 
     Удалите отступы и поля по умолчанию для элементов.
     *{ 
     заполнение: 0; 
     поля: 0; 
     } 
     Автор Мигель Нуньес 
     191 Подписчики
     Просто парень, который любит разрабатывать программное обеспечение. Канал YouTube: https://www.youtube.com/@codefoxx/videos
     Еще от Мигеля Нуньеса 
     Мигель Нуньес
     Как загрузить и просмотреть изображение с помощью JavaScript 
     Когда вы впервые узнаете, как для загрузки изображения в свой проект, скорее всего, вам достаточно будет просто успешно добавить файл … 
     ·4 мин чтения·8 августа 2021 г.
     Miguel Nunez
     HTML, CSS и JavaScript — Как показать/скрыть пароль с помощью значка глаза 
     В этом уроке я расскажу показать вам, как реализовать функцию отображения/скрытия пароля в поле ввода пароля.
     Зачем вам это…
     ·2 минуты чтения·2 августа 2022 г.
     Мигель Нуньес
     Как подсчитать количество посещений вашего веб-сайта с помощью Count API — JavaScript 
     Вы когда-нибудь задумывались, сколько посетителей посещает ваш сайт? В этом уроке я научу вас, как отслеживать это, всего за 4 простых шага, с помощью… 
     ·5 мин чтения·1 февраля 2022 г.
     Miguel Nunez
     Как загрузить и отобразить несколько Изображения с Node.js и Multer — JavaScript 
     с функцией перетаскивания 
     ·14 минут чтения·28 декабря 2022 г.
     Просмотреть все от Miguel Nunez
     Средний 
     Абхинав Кумар
     Использовали ли вы :is(), функцию псевдокласса CSS 
     :is() сделать CSS проще и чище 
     ·2 минуты чтения·22 января
     Философский технарь
     9 проектов, которые помогут вам стать мастером Frontend в 2023 году 
     Независимо от того, с чего вы начинаете, новичок вы или ветеран отрасли, постоянное обновление новых концепций, языков и… 
     ·5 мин.
    No related posts.