background-attachment в CSS


Содержание

Фиксированный фон в CSS (background-attachment)

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

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

Так вот, наша сегодняшняя задача сделать такую же фишку. Как разместить данное изображение (всегда предварительно оптимизируйте изображения перед загрузкой) в определенном месте мы уже знаем, но как заставить его зафиксироваться?! Давайте приступим и попробуем это сделать, как на данном скрине.

Теперь давайте разберемся куда мы можем поставить данное фоновое изображение. У нашего тега body, а также у блока div и Н1 уже есть фоновые картинки, а как мы знаем 2 изображения поставить нельзя (смотрите прошлые уроки). Но все очень просто: мы можем создать еще бесчисленное количество блоков div с другими идентификаторами внутри тега body, на фон которого поставить изображение. Для удобства в написании можно использовать аналогичный сдвиг строк, чтобы видеть где какой блок начинается и заканчивается, а также какой блок внутри другого.

Теперь давайте пропишем outline нашему новому блоку, чтобы видеть его границы. По окончанию работы это свойство можно просто удалить.

Вот появился наш блок, который по вертикали занял расстояние равное высоте контента, а по горизонтали все свободное пространство тега body. Но мы не можем проверить нашу работу, так как для этого мы должны прокрутить страницу браузера, а такой возможности пока у нас нет. Для этого давайте увеличим размер нашего блока с 421px до 991px, чтобы появилась полоса прокрутки.

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

Теперь если обновить браузер появилось наше изображение, но при прокрутке окна оно зафиксировано на месте и не прокручивается вместе с окном. Для этого нам необходимо прописать новое свойство, которое закрепит изображение относительно окна браузера.

Теперь при прокрутке окна, наш логотип с телефонами остается на месте относительно окна браузера, что очень часто используется при дизайне кнопок «службы поддержки», ссылки на блог или панели с социальными кнопками.

Ну и в конце нашего занятия давайте вновь сократим наши свойства уместив все в одну строчку. Мы просто пишем общее свойство background и далее просто перечисляем в строчку все его значения! Все просто!

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Помоги проекту — подпишись на наш Яндекс.Дзен канал!

CSS background-attachment Property

Example

A background-image that will not scroll with the page (fixed):

More «Try it Yourself» examples below.

Definition and Usage

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Default value: scroll
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.backgroundAttachment=»fixed» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
background-attachment 1.0 4.0 1.0 1.0 3.5

Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.

CSS Syntax


Property Values

Value Description
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
local The background image will scroll with the element’s contents
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

A background-image that will scroll with the page (scroll). This is default:

Example

How to create a simple parallax scrolling effect (create an illusion of 3D depth):

.fixed-bg <
/* The background image */
background-image: url(«img_tree.gif»);

/* Set a specified height, or the minimum height for the background image */
min-height: 500px;

/* Set background image to fixed (don’t scroll along with the page) */
background-attachment: fixed;

/* Center the background image */
background-position: center;

/* Set the background image to no repeat */
background-repeat: no-repeat;

/* Scale the background image to be as large as possible */
background-size: cover;
>

Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы рассмотрим пять CSS правил, которые позволяют задать фон для любого элемента в Html — background-position (image, repeat, color, attachment). Ну, и про составное правило Background тоже не забудем упомянуть.

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

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

Color, background-color и background-image

Давайте сначала посмотрим, как задается цвет Html элементов с помощью Css правила color. На самом деле тут все просто. Синтаксис совершенно обычный и цвет вы можете задавать в соответствии с тем, как это делали в языке гипертекстовой разметки. Как вы помните, цвета можно задавать с помощью шести цифр кода, поставленных после знака решетки (хеша — «#fe35a3»), либо с помощью трех цифр, если первая совпадает со значением второй, третья с четвертой, ну, а пятая, соответственно, с шестой (код цвета «#aa33ff» можно кратко записать как «a3f»).

Илон Маск рекомендует:  Тестирование Что такое альфа- и бета-тест

Так же цвета в Html и Css коде можно будет представлять в виде слов (например, «red»), но чаще всего используется именно шестнадцатеричный код:

Для примера я окрасил этот маленький абзац в тот цвет, который приведен выше (#303). Теперь он слегка отличается от цвета всех остальных абзацев (более темный), который задан как #555 в файле CSS используемой мною темы WordPress. Но задание цвета через color это довольно просто, а вот с фоном будет немного посложнее.

Итак, за фон в Css отвечают пять правил, которые при желании могут быть объединены в одно сборное. Чтобы их увидеть, можете перейти на страницу текущей спецификации консорциума W3C и поискать там что-нибудь со словом Background:

    background color — с помощью этого правила задается цвет фона для любого Html элемента. В нем можно использовать либо код, либо название оттенка, т.е. все в точности так, как и было при использовании color.

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


Путь можно указывать в Url как относительный, так и абсолютный. Использование фоновой картинки вовсе не запрещает вам одновременно использовать заливку цветом с помощью background-color. Эти CSS правила не являются взаимоисключающими.

  • background repeat — можно задать повторение картинки фона либо только по горизонтали в один ряд, либо только по вертикали, либо вообще запретить ее повторение.
  • background position — позволяет точно задать позицию этого изображения как в процентах, так и в абсолютных величинах
  • background attachment — позволяет выбрать тип привязки точки отсчета при позиционировании изображения для фона: либо относительно конкретного Html элемента, либо относительно области просмотра (видимой на экране компьютера области веб страницы).
  • Начнем с правила background-color — оно позволяет задать цвет фона для любого Html элемента, которому это правило будет адресовано с помощью селекторов в файле стилей (ну, или в котором оно может быть прописано с помощью атрибута Style).

    Если вы заглянете в спецификацию, то увидите, что по умолчанию цвет фона в любом элементе будет прозрачный (значение по умолчанию правила «background-color:transparent»). Правда, в элементах форм (select, input) он по умолчанию будет не прозрачным, т.к. это системные элементы и у них все по другому и отличается от обычных тегов языка гипертекстовой разметки.

    Цвет в background-color задается стандартно (шесть или три цифры шестнадцатеричного кода, либо слово):

    Например, фон этого абзаца задан именно через background-color с приведенным чуть выше кодом цвета.

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

    Если вы посмотрите в спецификацию языка стилевой разметки, то увидите, что для background-image по умолчанию используется значение «none» (т.е. никакого изображения для фона не используется). Ну, а если это все-таки нужно, то в функционале url () вам потребуется указать до него путь:

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

    Т.е. при использовании только одного правила background-image с указанием пути до графического файла, это самое изображение будет размножено как по вертикали, так и по горизонтали до тех пор, пока не покроет собой всю область отводимую на веб странице под данный конкретный Html элемент (в нашем примере это был абзац). Почему так происходит?

    Background-repeat — повтор фоновой картинки

    Да потому, что мы не прописали никакого значения для CSS правила background-repeat, а значит для него будет использоваться то значение, которое принято по умолчанию. Заглянув в спецификацию мы узнаем, что это значение соответствует «repeat» (повтор изображения по всем осям). Ответ нашелся сам собой.

    Следовательно, с помощью background-repeat мы сможем управлять повторениями фоновой картинки. У этого правила может быть только четыре значения:

    1. repeat — задает повтор картинки как по оси абсцисс (ось X, если еще не забыли школьный курс алгебры), так и по оси ординат (ось Y). Используется по умолчанию и указывать его специально в правиле не нужно
    2. repeat-x — она будет повторяться только по горизонтали и получится в результате только одна строка с повторами. Не забудьте, что правило background-repeat не будет работать, если вы не задали в background-image путь до фоновой картинки:
    3. repeat-y — будет повторяться только по вертикали (получится один столбец из повторов):
    4. no-repeat — вообще не будет повторяться и мы получим одно единственное изображение в левом верхнем углу области того Html элемента, для которого оно используется:

    Background-position — позиционирование фона

    Теперь возникает вопрос, а можно ли фоновую картинку отодвинуть от левого верхнего угла области ограничивающей размер элемента. Конечно же, можно, и для этой цели служит отдельное правило background-position:

    Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.

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


    Так же из спецификации видно, что для позиционирования изображения фона с помощью background-position можно использовать как относительные (проценты), так и абсолютные величины (например, пиксели или другие единицы размеров применимые в CSS). Ну, а так же можно использовать слова, которые будут соответствовать определенным цифровым значениям. Но обо все по порядку.

    При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения:

    Фон в CSS – памятка для начинающих

    При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

    Работа с фоном в CSS

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

    Илон Маск рекомендует:  Несколько background с помощью CSS, или Multiple Backgrounds

    background-color

    Задаёт цвет фона. Его можно применять как к отдельным элементам

    , так и ко всему веб-сайту с помощью тега .

    background-image

    Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

    Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

    background-repeat

    Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

    Оно может иметь несколько значений:

    • background-repeat: repeat-x — повторение по горизонтали;
    • background-repeat: repeat-y — повторение по вертикали;
    • background-repeat: repeat — повторение и по горизонтали и по вертикали;
    • background-repeat: no-repeat — изображение не повторяется.

    Например, повторение по горизонтали выглядит так:

    background-attachment

    Это свойство определяет фиксирование фонового изображения при скроллинге:

    • background-attachment: scroll — фон прокручивается вместе со страницей;
    • background-attachment: fixed — фон остаётся неподвижным.

    background-position

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

    Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .


    • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
    • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

    gradient

    Плавный переход от одного цвета к другому, причем переходов допускается несколько.

    Использование градиента можно наглядно продемонстрировать в примере кода:

    Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

    Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.

    Работа с размером фона в CSS

    В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

    Существует несколько способов, позволяющих определить размер:

    Абсолютное изменение размера

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

    Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

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

    Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

    Относительное изменение размера

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

    То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

    Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

    Масштабирование до максимального размера

    В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

    Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.

    Такой фон страницы будет автоматически подгоняться под любое разрешение:

    Заполнение фоном


    Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

    В том случае, если соотношения сторон различаются, картинка обрежется:

    Масштабирование сразу нескольких фонов

    Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:

    Создание полупрозрачного фона в CSS

    Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

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

    Пример создания полупрозрачного блока:

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

    В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

    Пример задания прозрачного фона:

    Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

    CSS background-attachment

    Свойство background-attachment позволяет задать поведение фона при прокручивании содержимого.

    Возможные значения:

    fixed — изображение остаётся на месте при прокручивании.

    scroll — изображение прокручивается вместе с прокруткой содержимого.

    local — изображение прокручивается не только вместе с прокруткой содержимого, но и с прокруткой самого элемента. Это сложно объяснить, лучше смотрите результат работы примера ниже.

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

    Низкий FPS при прокрутке страницы. Решение проблемы background-attachment: fixed

    Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:

    и довольный нажал F5. Красота, да и только!

    Начал скроллить страничку вниз и чувствую, что-то не то…

    Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

    Я начал свое расследование…


    Сначала я погрешил на свойство cover , но дело оказалось не в нем. Отключив фиксированное положение фона (убрав fixed), мой «Crysis» выдал мне больше 30 FPS! «Во дела. », подумал я. Как же так? Почему? Почему я не замечал этого раньше? Возможно, это не очень заметно на легковесных сайтах, где не так много html элементов.

    А дело оказалось вот в чем. Использование background-attachment : fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов.

    Чтобы решить эту проблему, нашему фоновому изображению нужен свой элемент, чтобы оно могло двигаться независимо от других. А также нам понадобится CSS3-свойство will-change . О нем речь пойдет ниже.

    Как только мы решим проблему с прорисовкой, скроллинг уже не будет проходить у нас рывками. Так как фон будет лежать на своем собственном слое, больше не потребуется перерисовывать страницу каждый раз при прокрутке.

    Давайте я покажу все на примере.

    Это наш изначальный код (я развернул свойства для наглядности):

    А вот, что нам необходимо сделать для решения проблемы:

    Мы добавили position: relative для элемента body , чтобы затем спозиционировать псевдо-элемент, который будет отдельным слоем для нашего фона. Остальные свойства, касательно фона, мы перенесли в ::before . У псевдо-элемента мы теперь используем position : fixed , вместо прежнего background-attachment: fixed у body . Ну и самое важное, без чего вся затея потерпит крах, — это свойство will-change.

    Илон Маск рекомендует:  Что такое код fbsql_set_transaction

    Свойство will-change предписывает браузеру отображать элемент, независимо от окружающих его других элементов. Оно как бы говорит браузеру: «Эй, друг, этот элемент изменится когда-нибудь потом, в будущем, так что прорисуй его только один раз на его собственном слое. И не нужно учитывать остальные элементы — он сам по себе».

    Данный билд я протестировал в разных браузерах, и вот небольшое резюме:

    1. Google Chrome. Все ОК, работает как часы.
    2. Mozilla Firefox. Все ОК, работает как часы.
    3. Opera. Все ОК, работает как часы.
    4. Safari. Все ОК, работает как часы. За проверку спасибо smssystem
    5. Microsoft Edge. Метод работает, но есть один косяк. Если крутить колесиком, то дергается верх и низ страницы, но потом приходят в норму. Если же крутить с помощью скроллбара, то все ОК.
    6. Internet Explorer. Та же проблема, что и у Edge.

    Свойство background-attachment

    Обычно фоновое изображение прокручивается вместе с содержимым блока. Это хорошо видно в мини-браузере. Прокрутите окно вниз и увидите, что фон поднимется наверх.

    С помощью свойства background-attachment можно зафиксировать фон на месте и он не будет перемещаться при прокручивании.

    • scroll — фон прокручивается вместе с содержимым. Это значение по умолчанию.
    • fixed — фон не прокручивается, зафиксирован на одном месте.

    Это тот случай, когда легче показать, чем объяснять: выполняйте задание и смотрите, как изменяется поведение фона при прокрутке.

    Урок 28. Неподвижный фон, прописанный с помощью стилей CSS. Размножающаяся и не размножающаяся картинка фона

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

    Подобный эффект может создать некоторую иллюзию двуслойности, некоего пространства на ваших страницах.
    Обычно эффекта неподвижной картинки фона добиваются с помощью постановки в таблицу стилей CSS следующих атрибутов: background-attachment: fixed; Речь идёт о таблице стилей CSS, которая у вас находится в отдельном документе с расширением .css

    Есть несколько способов установить то, что нам нужно.

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

    В документ стилей css, туда, где задаём параметры для BODY, вставляем такую конструкцию:


    В данном случае мы берём в качестве картинки фона большое изображение во весь экран (например, 1280 на 1024 px).

    Примечание: Если у вас нет документа стилей css, то вам необходимо создать его, как указано в Уроке 8 — и прописать ссылку на документ стилей css в коде своей html-страницы, как указано в этом же уроке.

    Итак, вот какие параметры мы задаём при помощи стилей:

    — background-image: url(адрес картинки фона); — прописываем адрес нашей фоновой картинки 1280 на 1024 px.

    — background-attachment: fixed; — задаём фону указание оставаться фиксированным, то есть, неподвижным.

    — background-repeat: no-repeat; — задаём фону указание не размножаться.

    — background-position: top; — задаём позицию фоновой картинке: устанавливаться по верхнему краю страницы.

    Итак, мы вставили в документ стилей css, в BODY, вот эту конструкцию:

    Я создала простую таблицу на 70 % экрана и поместила в ней текст и две картинки для наглядности. Вот что у нас получилось на странице: ПРИМЕР (чтобы увидеть эффект неподвижного фона, покрутите страницу вниз-вверх).

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

    При этом мы фиксируем весь фон, прописывая в таблице стилей css вот такую конструкцию:

    Здесь мы задали только параметр: background-attachment: fixed; — то есть, прописали указание браузеру сделать фоновую картинку неподвижной. Поскольку мы не сказали картинке «не размножаться» — она должна у нас размножиться на весь экран.

    Получится вот что: ПРИМЕР

    Попробуем установить фоновую картинку с одной стороны, а таблицу с текстом и картинками на странице расположить с противоположной стороны, чтобы она не загораживала собой фоновую картинку. Для этого пропишем в документе css следующее:

    — background:#e0ddd8 url(адрес фоновой картинки) — цвет под фоновой картинкой — бежевый, под цвет фона самой картинки. Это делается для того, чтобы не видно было перехода нашей картинки в фон (картинка занимает только часть экрана).

    — no-repeat — картинка не размножается (стоит одна большая картинка с одним из моих любимых американских актёров — Робертом Дювалем).

    — fixed — фон зафиксирован, то есть неподвижный.

    — left top — выровнен по левому верхнему краю экрана (можно поставить картинку справа, а таблицу сайта — слева, как вы пожелаете. Для этого в документе html в таблице вы пропишете:

    ПРИМЕР

    background-attachment

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

    Вместо background-attachment можно использовать универсальное свойство background.

    Тип свойства

    Применяется: ко всем элементам.

    Значения

    Значением background-attachment являются следующие ключевые слова:


    • scroll — прокрутка фонового изображения вместе с содержимым окна.
    • fixed — фиксирует фоновое изображение на одном месте.
    • inherit — наследует значение background-attachment от родительского элемента.

    Процентная запись: не существует.

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

    Синтаксис

    Пример CSS: использование background-attachment

    Версии CSS

    Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
    Поддержка: Да Да Да Да

    Браузеры

    Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
    Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
    Поддержка: Частично Да Да Да Да Да

    Internet Explorer 6.0 и 7.0 не понимают значение inherit .

    CSS стиль background-attachment

    Изображение может быть зафиксировано и оставаться неподвижным или перемещаться при скроллинге.

    Значение local поддерживается с Firefox начиная с 25-й версии

    Краткая информация по CSS-свойству background-attachment

    Значение по умолчанию scroll
    Наследуется Нет
    Применяется Ко всем элементам

    Правила написания свойства background-attachment

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

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

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

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

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

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

    Пример применения стиля background-attachment

    Проиллюстрируем работу background-attachment на примере. Фон нашей страницы будет состоять из 2х картинок, расположенных по бокам. Добавим блоку с контентом div достаточно большую высоту, чтобы появился скролл в окне браузера. С помощью значения fixed зафиксируем фон:

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL