Разное

Фон бэкграунд: background-attachment | htmlbook.ru

16.06.2023

background | 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

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

СпецификацияСтатус
CSS Backgrounds and Borders Module Level 3Возможная рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

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

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

Браузеры

 
один фон41213. 511
несколько фонов9121
10.5		1.33.6
один фон2.11103.2
несколько фонов2.11103.2
Браузеры

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

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

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

Цвет и фон

См. также

  • background-attachment
  • background-clip
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • Линейный градиент
  • Несколько фоновых картинок
  • Спрайты
  • Установка фона и градиента
  • Фоновая картинка

Рецепты

  • Как вместо символа маркера использовать картинку?
  • Как добавить две фоновые картинки к одному элементу?
  • Как добавить рисунок к внешним ссылкам?
  • Как изменить цвет кнопки?
  • Как изменить цвет ссылки при наведении?
  • Как размыть фоновую картинку?
  • Как указать язык сайта по ссылке?

Практика

  • Атрибут style
  • Полупрозрачный фон
  • Сокращённое значение цвета
  • Фоновая картинка
  • Цвет в RGB
  • Цвет фона таблицы
  • Цвет фона у ссылок
  • Шестнадцатеричный цвет

позиция фона — учебник CSS

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y.

Значения background-position

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

Ключевые слова для горизонтального позиционирования

  • left — фоновый рисунок прилеплен к левой стороне элемента;
  • center — фоновый рисунок расположен в центре оси x;
  • right — фоновый рисунок прилеплен к правой стороне элемента.
 

div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

  • top — фоновый рисунок прилеплен к верхней стороне элемента;
  • center — фоновый рисунок расположен в центре оси y;
  • bottom — фоновый рисунок прилеплен к нижней стороне элемента.

div {
	background-position-y: bottom;
}

Сокращенная запись для двух осей

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

Ниже — различные примеры позиционирования фона с помощью ключевых слов:


background-position: top center; /* фон вверху по центру */
background-position: top right; /* фон в верхнем правом углу */
background-position: bottom left; /* фон в левом нижнем углу */
background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

Примеры выравнивания фона с помощью background-position

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

Для позиционирования фона можно использовать и одно значение для двух осей сразу:


background-position: center; /* фон по центру */
background-position: left; /* фон слева по центру */
background-position: right; /* фон справа по центру */
background-position: top; /* фон вверху по центру */
background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

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


div {
background-position: 10px 25px;
}

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

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


div {
background-position: right 15px bottom 40px;
}

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.


Процентные значения

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

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


Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:


Важно: фоновые изображения и печать

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

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

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12. 1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

Далее в учебнике: background-attachment — фиксация фона.

550+ фото фоновых изображений | Скачать бесплатные изображения на Unsplash

550+ фото фоновых изображений | Скачать бесплатные изображения на Unsplash
  • A Photophotos 10k
  • А. В сотрудничестве с Маргарет Яшовской

    Unsplash+

    Разблокировать

    Торт фотоКекс фото и картинкиобложка журнала

    Yiqun Tang

    Hq фон фотостенаHd осенние обои

    –––– –––– –––– – –––– – –––– –– – – – –––– – – –– ––– –– –––– – –.

    Annie Spratt

    Цветы фото hd цветы фоткифлора

    Ryan Hoffman

    mount shastaСШАHD обои

    Efe Kurnaz

    hd картинкиСветлые фоныHd цветные обои

    Jako Rose

    11

    Hd grey wallpapersspokemachine

    Unsplash logo

    Unsplash+

    In collaboration with Margaret Jaszowska

    Unsplash+

    Unlock

    food and drinkbakerybaking

    William Daigneault

    Nature imagesHd forest wallpapersHd wood wallpapers

    Kajetan Sumila

    Hq background imagesschweizsuhr

    Erol Ahmed

    Пастельные обои HDДверьРозовые обои HD

    Joël de Vriend

    bridgeoutdoorsfolklore

    Josh Calabrese

    plantHd green wallpapersLeaf backgrounds

    Unsplash logo

    Unsplash+

    In collaboration with Getty Images

    Unsplash+

    Unlock

    photographylog cabinplaid

    Artiom Vallat

    suissefranches-montagnesground

    William Daigneault

    québec citycanadatunnel

    Sorrawis Chongcharoen

    архитектуразданиеПейзаж фото и картинки

    Louis Maniquet

    francearcachonHd android wallpapers

    Leandra Rieger

    Moon images & picturesplanted earth landscaping incbuckhorn road

    Unsplash logo

    Unsplash+

    In collaboration with Getty Images

    Unsplash+

    Unlock

    portraitchildrug

    Annie Spratt

    Текстура фоныHD обои дерево картинкиHd узор обои

    Торт фотоКекс фотографииОбложка журнала

    mount shastaunited statesHd wallpapers

    Hd grey wallpapersspokemachine

    Nature imagesHd forest wallpapersHd wood wallpapers

    Hd pastel wallpapersdoorHd pink wallpapers

    plantHd green wallpapersLeaf backgrounds

    photographylog cabinplaid

    québec citycanadatunnel

    francearcachonHd android wallpapers

    portraitchildrug

    –––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

    Hq background imageswallHd autumn wallpapers

    Flower imagesHd floral wallpapersflora

    Hd wallpapersLight backgroundsHd color wallpapers

    food and drinkbakerybaking

    Hq background imagesschweizsuhr

    bridgeoutdoorsfolklore

    suissefranches-montagnesground

    architecturebuildingLandscape images & pictures

    Moon images & picturesplanted земля озеленение incbuckhorn road

    Похожие коллекции

    Nice Photo for Background

    390 фото · Куратор Gary Wang

    Фотофон

    66 фото · Куратор Katriana Young

    Фоновое фото

    41 фото · Куратор Tatiana wood Oooo Текстурированные обои 9Hd wallpapers 10s1 background

    11 90 pattern

    Торт фотоКекс фотообложка журнала

    hd картинкиСветлый фонHd цветные обои

    Природа фотоHD лес фоткиHd дерево обои

    bridgeoutdoorsfolklore

    québec citycanadatunnel

    Moon images & picturesplanted earth landscaping incbuckhorn road

    Hq background imageswallHd autumn wallpapers

    mount shastaunited statesHd wallpapers

    food and drinkbakerybaking

    Hd pastel wallpapersdoorHd pink wallpapers

    photographylog cabinplaid

    architecturebuildingLandscape images & картинки

    портретребеноклекарство

    –––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

    Flower ImageShd цветочный обои

    HD Grey Wallpapersspokemachine

    HQ фоновая Imagesschweizsuhr

    Planthd Green Alpapersleaf Photo

    . Куратор Катриана Янг

    Фоновое фото

    41 фото · Куратор Татьяна Оооо

    suissefranches-montagnesground

    francearcachonHd обои для Android

    Текстурные фоныHd деревянные обоиHd обои с узором

    Просмотр премиальных изображений на iStock | Скидка 20% на iStock

    Unsplash logo

    Сделайте что-нибудь потрясающее

    Скачать бесплатные фоновые обои, [1200+] Фоновые обои БЕСПЛАТНО

    Войдите в Wallpapers .com

    Продолжить с Facebook

    Продолжить с Google

    или

    Адрес электронной почты отсутствует

    Пароль отсутствует

    Неверный адрес электронной почты и/или пароль. Пожалуйста, попробуйте еще раз.

    Забыли пароль? Сбросить

    Нет на Wallpapers.com еще? Зарегистрироваться

    Забыли пароль?

    Введите свой адрес электронной почты, и мы вышлем вам ссылку для сброса пароля

    Пожалуйста, введите ваш адрес электронной почты

    Назад войти

    Поиск

    (1000+ фоновых обоев)

    Скачать Фон обои картинки для любого устройства и размера экрана.

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

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