background - «Учебник CSS»
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 20 ноябрь 2024, 00:00
Данные всех россиян уже утекли в даркнет, заявил глава «Ростелекома» - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
       
  • 24 март 2016, 17:40
Написание эффективного кода
  • 24 март 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 май 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апрель 2024, 01:19
Скачать приложение Betera на Android
20-03-2016, 13:38
background - «Учебник CSS»
Рейтинг:
Категория: Справочник CSS
CSS Internet Explorer Chrome Opera Safari Firefox Android iOS
2.1 6.0+ 8.0+ 1.0+ 3.5+ 1.0+ 1.0+ 2.1+ 1.0+
3 9.0+ 1.0+ 10.5+ 1.3+ 3.6+ 2.1+ 1.0+

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


Значение по умолчанию transparent || none || repeat || scroll || 0% 0%
Наследуется Нет
Применяется Ко всем элементам
Ссылка на спецификацию http://www.w3.org/TR/CSS21/colors.html#propdef-background

Версии CSS


CSS 1 CSS 2 CSS 2.1 CSS 3

Описание


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


Синтаксис


CSS2.1 
background: [background-attachment || background-color || background-image 

						  || background-position || background-repeat] | inherit[/code]
CSS3 
background: [<фон>, ]* <последний_фон>[/code]

Здесь:


<фон> = [background-attachment || background-image
|| background-position || background-repeat] | inherit


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


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


Значения


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



Пример 1


XHTML 1.0CSS2.1IECrOpSaFx


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>background</title>
  <style type="text/css">
   div {
    height: 200px; /* Высота блока */
    width: 200px; /* Ширина блока */
    overflow: auto; /* Добавляем полосы прокрутки */
    padding-left: 15px; /* Отступ от текста слева */
    background: url(images/hand.png) repeat-y #fc0; /* Цвет фона, 
                                                    путь к фоновому изображению и 
                                                    повторение фона по вертикали */
   }
  </style>
 </head>
 <body>

  <div>
   Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie 
   consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et 
   iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore
   te feugat nulla facilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion 
   ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te 
   feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
  </div>

 </body>
</html>


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



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


Пример 2


HTML5CSS3IECrOpSaFx


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

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


[window.]document.getElementById("elementID").style.background



Браузеры


Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.


CSS Internet Explorer Chrome Opera Safari Firefox Android iOS 2.1 6.0 8.0 1.0 3.5 1.0 1.0 2.1 1.0 3 9.0 1.0 10.5 1.3 3.6 2.1 1.0 Краткая информация Значение по умолчанию transparent || none || repeat || scroll || 0% 0% Наследуется Нет Применяется Ко всем элементам Ссылка на спецификацию Версии CSS CSS 1 CSS 2 CSS 2.1 CSS 3 Описание Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую. Синтаксис CSS2.1 CSS3 Здесь: = _

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.


Теги: CSS, background htmlbook.ru

Просмотров: 10 827
Комментариев: 1:   20-03-2016, 13:38
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР