Использование фонов при оформлении сайта. Часть 2

css_background-2

И снова здравствуйте, дорогие друзья!

Постоянно замечаю, что когда готовлю для Вас какую-нибудь новую статью — сам учусь чему-то новому, или вспоминаю что-то старое (давно забытое). И это здорово!..

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


Сегодня мы постараемся их все обсудить. Начнем...

Свойство background-attachment

Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Может принимать следующие значения:

fixed — Делает фоновое изображение элемента неподвижным.

scroll — Позволяет перемещаться фону вместе с содержимым.

inherit — Наследует значение родителя.

local — Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

Посмотреть как работает данное свойство можно вот в этом демо.

Следует также отметить, что не все браузеры полностью способны обработать данное свойство:

  • В браузере Internet Explorer 6 значение fixed работает только для тегов <body> или <html>.
  • Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
  • Chrome поддерживает значение local с версии 4.0.
  • Safari поддерживает значение local с версии 5.0.
  • Firefox не понимает значение local.

Свойство background-clip

Свойство background-clip отвечает за расположение изображения, будет оно накрываться рамкой или нет.

Может принимать значения:

padding-box — Фон отображается внутри границ.

border-box — Фон выводится под границами.

content-box — Фон отображается только внутри контента.

Более понятно станет, когда вы взгляните на картинку:

background-clip

На картинке красными точками обозначена граница элемента. Как сделать границу в виде точек — можно узнать из статьи «Использование границ (border) при верстке».

Как и предыдущее свойство, не все браузеры понимают свойство background-clip в полном объеме:

  • В IE7 фон по умолчанию выводится как при значении padding-box.
  • Safari понимает только нестандартное свойство -webkit-background-clip, также с ним работает и Chrome.
  • Opera до версии 12.0 не поддерживает значение content-box.
  • Firefox до версии 4.0 поддерживает нестандартное свойство -moz-background-clip.

Свойство background-origin

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

Как и background-clip, принимает значения:

padding-box — Фон позиционируется относительно края элемента с учетом толщины границы.

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

content-box — Фон позиционируется относительно содержимого элемента.

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

background-origin

Ну и традиционно, совместимость с браузерами:

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

Заключение

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

Желаю всем удачи! Увидимся в следующих статьях...
Не забываем подписываться на обновления.

 

Обновления блога:

Вы еще не читаете нашу ?
Тогда получайте новые статьи на E-mail:
Моя статья помогла Вам? Это хорошо! Теперь не нужно жадничать - поделитесь этой статьей с друзьями в социальных сетях.
Хотите быть в курсе того, что происходит на сайте? Читайте меня в Твиттере.

Комментарии запрещены.