Тег background – Изображения…. В каких случаях вставлять в css через background, а в каких в html через тег img? Как сделать изображение адаптивным?

Атрибут background | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

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

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

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

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TD, атрибут background</title>
 </head>
 <body>

  <table>
   <tr>
    <td background="images/snow.gif">Ячейка с фоновым рисунком</td>
   </tr> 
  </table> 

 </body>
</html>

Атрибут background | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

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

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

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

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TH, атрибут background</title>
 </head>
 <body>

  <table>
   <tr>
    <th background="/images/snow.gif"> ... </th>
    <td> ... </td>
   </tr> 
  </table> 

 </body>
</html>

seodon.ru | Теги HTML - Тег TH

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

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

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

Значения

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

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

Синтаксис

<th background="значение">...</th>

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

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

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

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

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

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

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

Атрибута background нет в спецификации HTML, поэтому, если его использовать, будет невалидный код. А вообще, рекомендуется применять стили (CSS).

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

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

Атрибут background | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
2.0+ 1.0+ 2.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

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

Синтаксис

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

Значения

Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.

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

Нет.

Аналог CSS

background-image

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE, атрибут background</title>
 </head>
 <body>

   <table background="images/snow.gif">
    <tr>
     <td> ... </td>
    </tr> 
   </table> 

 </body>
</html>

seodon.ru | Теги HTML - Тег TABLE

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

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

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

Значения

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

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

Синтаксис

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

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

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

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

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

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

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

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

Атрибута background нет в спецификации HTML, поэтому, если его использовать, будет невалидный код. А вообще, рекомендуется применять стили (CSS).

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

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

background | CSS | WebReference

Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Краткая информация

Значение по умолчаниюtransparent || none || repeat || scroll || 0% 0%
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис ?

background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip

<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color

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

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

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

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>
  <div>Великобритания, куда входят Пик-Дистрикт, Сноудония и 
  другие многочисленные национальные резерваты природы и парки, 
  неумеренно применяет культурный рельеф. Суша морей начинает 
  туристический подземный сток. Дождливая погода дегустирует кандым. 
  Винный фестиваль проходит в приусадебном музее Георгикон, там же 
  беспошлинный ввоз вещей и предметов в пределах личной потребности 
  связывает белый саксаул. Санитарный и ветеринарный контроль 
  оформляет городской Гвианский щит.</div>
 </body>
</html>

Результат данного примера показан ниже (рис. 1).

Вид фона и фонового рисунка в блоке фиксированного размера

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background</title>
  <style>
   body {
    background: url(/example/image/hand.png) repeat-y, 
                url(/example/image/bg-right.png) repeat-y 100% 0, #fc0;
   }
  </style>
 </head>
 <body>
 </body>
</html>

Объектная модель

Объект.style.background

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

 
один фон41213.511
несколько фонов912110.51.33.6
один фон2.11103.2
несколько фонов2.11103.2

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 18.03.2018

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

background-origin | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 4.0+ 10.1+ 10.5+ 3.1+ 5.0+ 3.6+ 4.0+ 2.1+ 3.0+ 1.0+

Краткая информация

Значение по умолчанию padding-box
Наследуется Нет
Применяется Ко всем элементам
Процентная запись Неприменима
Ссылка на спецификацию http://www.w3.org/TR/css3-background/#background-origin

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

Синтаксис

background-origin: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]*

Значения

padding-box
Фон позиционируется относительно края элемента с учетом толщины границы.
border-box
Фон позиционируется относительно границы, при этом линия границы может перекрывать изображение.
content-box
Фон позиционируется относительно содержимого элемента.

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

Результат использования значений свойства background-origin для элемента с рамкой толщиной 20 пикселов показан на рис. 1.

padding-box border-box content-box

Рис. 1. Результат применения разных значений

Пример

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-origin</title>
  <style>
   .example {
    border: 20px solid #fc0;
    padding: 20px;
    height: 200px;
    background: url(images/figure.jpg) no-repeat;
    background-origin: content-box;
   }
  </style>
 </head>
 <body>
  <div>...</div>
 </body>
</html>

Браузеры

Если фон задан один, а значений background-origin несколько, то браузеры покажут разное поведение. Firefox и Opera используют первое значение, Chrome и Safari создадут несколько фоновых рисунков.

Safari до версии 5.0, Android до версии 3.0 поддерживают нестандартное свойство -webkit-background-origin.

Opera до версии 10.1 поддерживает нестандартное свойство -o-background-origin.

Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-origin.

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

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