Html background body: Атрибут background | htmlbook.ru

Leave a Comment / Html / By /

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 и выше
Поддержка:ДаДаДаДаДа

Анимированный фон веб-страницы на чистых HTML и CSS

Домой Обучение Анимированный фон веб-страницы на чистых HTML и CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «Amazing Pure HTML and CSS background animations».

Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.

Диагональный градиент

See the Pen Diagonal Color Gradients by Alison Quaglia (@hylobates-lar) on CodePen.

Написать такой код легко, а эффект получается очень интересный.

Скольжение диагоналей

See the Pen Sliding Diagonals Background Effect by Chris Smith (@chris22smith) on CodePen.

Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.

Анимированный фон

See the Pen Animation Background || Only Css by Nour Ibram (@nouribram) on CodePen.

Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.

Бесконечный паттерн

See the Pen Pattern Animation (Infinite) by Adam Abundis (@adamabundis) on CodePen.

Отдельное спасибо @keyframes за бесконечную прокрутку!

Прекрасный анимированный бэкграунд

See the Pen Awesome Animated background by beshoy ekram (@beshoooo) on CodePen.

Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.

Анимированный «лесной» фон

See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.

Плавающие квадраты

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Снова диагональные линии

See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen.

Весьма ненавязчиво!

Плывущие облака

See the Pen Floating Cloud Background by Shaw (@shshaw) on CodePen.

Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).

Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.

  • ТЕГИ
  • frontend
  • верстка

Предыдущая статьяКак создавать инклюзивные и доступные цифровые продукты

Следующая статья4 полезных инструмента для веб-разработки, нечасто попадающих в списки «самых-самых»

Редакция techrocks.ru

techrocks.ru — качественный контент, созданный инженерами для инженеров

HTML | background Атрибут

Улучшить статью

Сохранить статью

  • Уровень сложности: Easy
  • Последнее обновление: 28 мар, 2022

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Атрибут HTML background используется для указания фонового изображения для документа.
    Примечание: Не поддерживается HTML5 Вместо использования этого атрибута мы используем свойство фона CSS.

    Синтаксис:

    Значения атрибута: Содержит значение, т.е. URL Которые указывают адрес фонового изображения.
     

    • Абсолютный URL: Указывает на другой веб-сайт.
    • Относительный URL: Указывает на файл на веб-сайте.

    Пример:

    < html >

     

    < head >

         < title >

             HTML body Background Attribute

         название >

    голова >

    2 3

    2

    20061

    < body background =

          

         < center >

             < h2 >GeeksforGeeks h2 >

             < h3 >HTML < body > background Attribute h3 >

              

             < a href = "#" >

                 It is a Computer Science portal For Geeks

    A >

    Центр >

    19. 0063 Body >

    HTML >

    . Ниже перечислены атрибуты :

    • Google Chrome
    • Internet Explorer
    • Firefox
    • Safari
    • Opera

     

    css - Применение фона к и/или

    Это правильное поведение. 1 В стандартном режиме body , а также html не сразу занимают всю высоту области просмотра, даже если это выглядит так, когда вы применяете только фон к последнему. На самом деле элемент html примет фон body , если вы не дадите ему свой собственный фон, а html передаст это на холст:

    Фон корневого элемента становится фоном холста, а его область рисования фона расширяется, чтобы покрыть весь холст, хотя любые изображения имеют размер и положение относительно корневого элемента, как если бы они были нарисованы только для этого элемента. (Другими словами, область позиционирования фона определяется как для корневого элемента.) Если значение «фонового цвета» корня равно «прозрачному», цвет фона холста зависит от UA. Корневой элемент не закрашивает этот фон повторно, т. е. используемое значение его фона прозрачно.

    Для документов, корневым элементом которых является элемент HTML HTML или элемент XHTML html : если вычисленное значение «фонового изображения» в корневом элементе равно «нет», а его «фоновый цвет» — «прозрачный». , пользовательские агенты должны вместо этого распространять вычисленные значения свойств фона из первого дочернего элемента HTML BODY или XHTML body этого элемента. Используемые значения свойств фона этого элемента BODY являются их начальными значениями, а распространяемые значения обрабатываются так, как если бы они были указаны для корневого элемента. Рекомендуется, чтобы авторы HTML-документов указывали фон холста для BODY вместо элемента

    HTML .

    Тем не менее, вы можете наложить любое фоновое изображение на цвет фона на один элемент ( html или body ), не полагаясь на два элемента — просто используйте background-color и background -image или объединить их в background сокращенное свойство:

     body {
    background: #ddd url(background.png) по центру вверху без повторов;
}

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

    • В CSS2 пригодится стилизация обоих элементов: просто установите фоновое изображение на html и другое изображение на body , которое вы хотите наложить поверх первого . Чтобы фоновое изображение на body отображалось на полной высоте области просмотра, необходимо применить height и min-height соответственно а также:

       HTML {
    высота: 100%;
    background: #ddd url(background1. png) повтор;
}
тело {
    минимальная высота: 100%;
    background: прозрачный url(background2.png) по центру вверху без повторов;
}

      Между прочим, причина, по которой вы должны указать height и min-height to html и body соответственно, заключается в том, что ни один из элементов не имеет собственной высоты. Оба имеют высоту : авто по умолчанию. Это окно просмотра имеет высоту 100%, поэтому height: 100% берется из окна просмотра, затем применяется к body как минимум, чтобы обеспечить прокрутку содержимого.

    • В CSS3 синтаксис был расширен, поэтому вы можете объявить несколько значений фона в одном свойстве, избавляя от необходимости применять фоны к нескольким элементам (или настраивать высоту / min-height ):

       корпус {
    фон: url(background2.png) по центру вверху без повторов,
                #ddd url(background1. png) повторить;
}

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

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

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

    Мои комментарии под этим другим ответом объясняют, с сопровождающей скрипкой, как body на самом деле смещено от html по умолчанию, даже если вместо этого кажется, что оно заполняется, опять же из-за этого, казалось бы, странного явления.

    1 Это может иметь свои корни в настройке атрибутов HTML background и bgcolor тела , в результате чего атрибут фона применяется ко всему экрану просмотра.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *