Как поместить элемент css на задний план?
По идее, элемент head_bg_img должен быть на заднем фоне, но он перекрывает остальные два. Пробовал применять также и z-index но иэто не увенчалось успехом. Как быть?
Отслеживать
задан 4 окт 2016 в 14:58
461 2 2 золотых знака 8 8 серебряных знаков 21 21 бронзовый знак
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.head < width: 600px; height: 200px; overflow: hide; >.name, .head_info < position: relative; float: left; >.head_bg_img
Информация о компании Имя компании
Отслеживать
ответ дан 4 окт 2016 в 15:05
Dmytro Kondratiuk Dmytro Kondratiuk
2,126 1 1 золотой знак 9 9 серебряных знаков 13 13 бронзовых знаков
У кого-то должен быть position: absolute;
.name, .head_info < position: absolute; z-index: 2; top: 0; left: 0; right: 0; float: left; >.head_bg_img
Информация о компании Имя компании
Либо отрицательный margin :
.name, .head_info < position: relative; top: -250px; float: left; >.head_bg_img
Информация о компании Имя компании
Но ничего не перекрывается.
Как переместить картинку на задний план css
На задний план
Надо шар(.absolute) за прямоугольниками(.left/.rigth) сделать , я уже все перепробовал , ничего не.
Слайдер на задний план
Поставил, я слайдер FLEXSLIDER, и он у меня закрывает, всплываешее меню, на сайте, можно ли как то.
Поместить текстуру на задний план
Всем привет) Помогите нубу поместить текстуру на задний план, и можно ли вообще это сделать? У.
Как поместить на задний план?
Необходимо создать навигационное меню и на заднем плане должен быть фон. Но когда я создаю.
Сообщение было отмечено Kassia как решение
Решение
Блоки CSS — как поместить на задний план?
Что-то надо подправить, чтобы основной блок с предисловием был ЗА блоками с заголовком. .
Картинка на задний фон
Не встаёт картинка (а цвет фона меняется). <!DOCTYPE html> <html> <head> <meta.
Прижать один элемент (блок) к другому + один ещё отодвинуть на задний план или укоротить
Имеется сайт, надо "скачущий" элемент сплеш в жёлтой рамке поместить на задний план или укоротить.
background-position¶
Свойство background-position задаёт начальное положение фонового изображения, установленного с помощью свойства background-image .
Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис¶
Значения¶
У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- right top = top right = 100% 0% (в правом верхнем углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (в левом нижнем углу)
- bottom = bottom center = center bottom = 50% 100% (по центру внизу)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
background — position
Фоновая картинка подчиняется этому свойству и занимает нужную позицию.
Время чтения: меньше 5 мин
- Кратко
- Пример
- Как пишется
- Ключевые слова
- Пиксели или другие единицы измерения длины
- Проценты
- Алёна Батицкая советует
Обновлено 20 декабря 2021
Кратко
При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.
Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.
Пример
Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.
Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.
Позиция в процентах:
Или при помощи ключевых слов:
Как пишется
Ключевые слова
Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.
Левый верхний угол:
По центру по горизонтали и у нижнего края:
Пиксели или другие единицы измерения длины
Можно указать конкретное положение картинки в блоке.
10 px от левого края и 150 px от верхнего края:
1 rem от левого края и по центру между верхом и низом:
15 единиц ширины от левого края и 25 единиц высоты от верха:
Проценты
Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.
Правый нижний угол:
Слева 15%, сверху 5%:
Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:
- Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
- Над картинкой 5% свободного места, а под ней — оставшиеся 95%.
Подсказки
�� Свойство положения фона не наследуется.
�� Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.
�� Значение по умолчанию — 0% 0% (левый верхний угол).
�� Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.
�� Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.
�� Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.
�� Изменение положения фона можно анимировать при помощи свойства transition ��
На практике
Алёна Батицкая советует
�� В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.
�� Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.
�� Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.
Фон в CSS (background-color, background-image)
Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.
Также Вы можете отправить нам свой отзыв на наши услуги, замечание или предложение. Мы ценим наших клиентов и внимательно прислушиваемся ко всем замечаниям!
- HTML
- Основы
- Теги
- Основы
- Свойства
- Основы
- База данных
- Объектно-ориентированное программирование
- Laravel
- Yii
- Основы
- WordPress
- Управление
- Разработка
- Управление
- Разработка
- Управление
- Разработка
- Управление
- Разработка
- Управление
- Разработка
- Управление
- Разработка
- Управление
- Управление
- Управление
- Управление
- Управление
- Управление
- Основы
- Работа с DOM
- AJAX
- jQuery
- Vue
- NodeJS
- React
- Основы React
- Стейты в React
- Компоненты React
- Apache
- Игровые серверы
- Linux
- MySQL
- Docker
- Nginx
- Устранение ошибок
- Почта
- SEO
- Личный кабинет
- Виртуальный хостинг
- Домены
- Генератор паролей
- Генератор .htpasswd
Коврик для мыши новым клиентам
Оплатите хостинг на год и получите удобный коврик
Помощь в переносе
с другого хостингаХотите переехать? Мы поможем перенести всё
Запишитесь на интенсивные курсы по созданию сайтов.
Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.
Похожие публикации:
- Tiles sqlite что за файл андроид
- Как восстановить контактную площадку на плате
- Как сделать проверку на тип данных в python
- Как наложить блок на блок css
Как переместить картинку на задний план css
Пособие для начинающих по позиционированию фона в CSS
Применение фоновых изображений к элементам, вероятно, одна из самых востребованных возможностей в CSS, и есть множество фоновых свойств, которые позволяют нам управлять различными аспектами фона элемента.
У элемента может быть более одного фонового изображения. Если вы хотите применить более одного фонового изображения, то можете представить их в виде разделённого запятыми списка значений для свойства background — image . Свойство background — position используется для указания позиции фонового изображения, и это свойство стоит рассмотреть поглубже, т.к. его различные возможные значения приводят к разным результатам, некоторые из которых могут оказаться для вас в новинку, если вы не очень хорошо разбираетесь в CSS.
Мы будем позиционировать одно фоновое изображение во всех примерах, чтобы сохранить код и общие понятия простыми на протяжении всей статьи. Но что подходит для одного фонового изображения, то применимо и ко множественным.
Фоновое изображение позиционируется внутри того, что называется «областью позиционирования фона» элемента. Эта область позиционирования фона, как ясно из названия, указывает область, внутри которой будет позиционироваться фон, и у нее есть система координат, используемая для работы с позиционированием.
Прежде чем продолжить углубляться в основные понятия позиционирования, давайте сначала быстренько заглянем в боксовую модель CSS и посмотрим, как она влияет на позиционирование фоновых изображений внутри элемента.
Области боксовой модели CSS
У элемента в CSS определены три области, называемые боксами: border box (бокс по границы включительно), padding box (бокс по отступу) и content box (бокс по содержимому). border box – область элемента, которая включает всю его внутреннюю часть плюс область, которую занимают сами границы.
Padding box – область элемента, исключающая границу, но включающая контент элемента и окружающие его отступы – указанные при помощи свойства padding .
Content box – область, созданная контентом элемента, исключающая любые отступы и границы.
Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.
Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin .
Когда вы назначаете элементу фон в виде изображения или сплошного цвета, то по умолчанию он закрашивает всю область границы элемента. (Можно изменить это поведение при помощи свойства background — origin , но мы вернёмся к нему в ближайшее время.)
Чтобы указать, где именно внутри области позиционирования будет находиться фоновое изображение, этой области необходима система координат, используемая для преобразования в неё значений background-position. Прежде чем двигаться дальше, давайте повнимательнее рассмотрим эту систему координат.
Система координат элемента
По умолчанию, по самой природе боксовой модели элемента в CSS, у каждого элемента есть система координат, которая определяется его высотой и шириной. Эта система координат используется, чтобы позиционировать элемент относительно других элементов и позиционировать потомков элемента относительно него самого.
У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.
Начальная точка системы координат в CSS расположена в левом верхнем углу элемента.
Область позиционирования фона также определяется системой координат, установленной для нее, и служит для позиционирования фонового изображения в этой области. У этой системы координат начальная точка тоже находится в верхнем левом углу области позиционирования.
Поскольку по умолчанию областью позиционирования является padding box, то по умолчанию начальной точкой системы координат области позиционирования фона будет верхний левый угол области внутреннего отступа элемента.
Это означает, что, когда вы применяете фоновое изображение к элементу, браузер будет позиционировать первое и последующие повторения изображения, начиная от верхнего левого угла области внутреннего отступа элемента.
Например, предположим у вас есть фоновое изображение, применённое к элементу, и вы не задали ему повторение (поэтому применяется только один экземпляр этого изображения). Исходной позицией фонового изображения внутри системы координат будет начальная точка системы координат padding box. Поэтому верхний левый угол изображения позиционируется в верхнем левом углу внутреннего отступа элемента. (См. живой пример ниже.)
К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.
Изображение любезно предоставлено Freepik.com
Используя свойство background — position , о котором мы поговорим в этой статье, мы можем изменять позицию изображения внутри этой системы координат.
Но как упоминалось ранее, мы можем изменить область позиционирования фона, и это, в свою очередь, изменит начальную точку, используемую для позиционирования изображения внутри области фона элемента.
Изменение области позиционирования фона и системы координат при помощи background — origin
Свойство background — origin применяется, чтобы изменить начальную точку системы координат, используемую, чтобы позиционировать фоновое изображение в области позиционирования фона.
Оно принимает одно из трёх значений: padding — box (значение по умолчанию), content — box и border — box .
В зависимости от выбора области позиционирования фона, соответствующей точке отсчета для фона — начальная точка системы координат, установленной для этой области — изменится, и начальное (по умолчанию) положение фонового изображения тоже.
Следующий живой пример показывает разные исходные точки фона/области позиционирования в действии.
Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.
Для каждой области позиционирования фона, указанной при помощи background — origin , система координат будет сдвигаться, чтобы покрыть эту область.
Затем, в этой системе координат можно указать положение фонового изображения, используя свойство background — position .
Ради простоты, в остальной части этой статьи, мы оставим область позиционирования фона элемента по умолчанию. Поэтому все наши примеры будут применены к элементу, у которого фон позиционируется именно в области отступа.
Позиционирование фоновых изображений при помощи background — position
В прошлом разделе мы видели, как фоновое изображение по умолчанию позиционируется в левом верхнем углу области позиционирования. Это связано с тем, что по умолчанию значение свойства background — position равно 0% 0%.
По умолчанию для background — position используются процентное значение. В background — position можно подставлять либо процентное, либо абсолютное значение, которые указывают смещение изображения от одного из четырёх краёв области позиционирования (вверх, право, низ, лево)
Углы смещения элемента и система координат в CSS.
В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top , right , bottom , left и center .
Положение фона можно описывать при помощи указания одного значения для смещения (ключевое слово, проценты или длина), двух значений (пара значений с теми же тремя вариантами для каждого) или четырёх значений (ключевое слово и числовое значение смещения относительно соответствующего края). Мы поговорим об этом более детально в последующих разделах.
Если вы укажите только одно значение, то второе будет считаться, как center . Если укажите два значения, то первое будет определять смещение от левого угла — т.е. горизонтальную позицию, а второе – смещение вниз от верхнего угла — вертикальную позицию.
Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left — нет, она должна выглядеть так: left 50% . При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.
Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение 0% от левого края, right — смещение 100% от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.
Начнём с того, как работает каждый тип значения — вероятно, это наиболее важная вещь, т.к. есть фундаментальное различие между тем, как браузер позиционирует фоновые изображения при абсолютных и процентных значениях. По ходу изучения мы посмотрим больше примеров.
Как работают абсолютные значения background-position
При указании значения в абсолютных единицах, вы смещаете верхний угол фонового изображения на указанное число. Другими словами, изображение передвинется так, чтобы его верхний левый угол позиционировался на указанные в значении background — position смещения.
Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.
Позиционирование фонового изображения при помощи абсолютных значений.
Абсолютное значение также может быть отрицательным. В этом случае изображение сместится в обратном направлении от края.
Пример, показывающий смещение изображения при помощи отрицательного значения.
Попробуйте изменить значения позиции фона в следующем живом примере, чтобы увидеть, как оно влияет на изображение. И обязательно попробуйте отрицательное значение!
Как работают процентные значения background-position
В отличие от значения смещения в абсолютных единицах длины, которое двигает верхний левый угол элемента на указанное расстояние, процентное значение выравнивает точку в X% от левого (для горизонтальной составляющей) или верхнего (для вертикальной) края изображения с точкой в X% от левого (для горизонтальной) или верхнего (для вертикальной) края контейнера.
Например, процентное значение 0% 0% выровняет точку 0% 0% изображении с точкой 0% 0% в системе координат области позиционирования фона. Значение 50% 75% свойства background-position выровняет точку, которая находится в 50% от левого и в 75% от верхнего края изображения с точкой, которая расположена на 50% 75% в области позиционирования фона.
И снова, лучше объяснит наглядный пример. Заметьте, как указанное значение background-position используется, чтобы получить точку этих координат внутри изображения, а затем выравнивает эту точку с точкой в тех же координатах в области позиционирования.
Позиционирование фонового изображения при помощи процентных значений..
Как и с абсолютными единицами длины, можно указать процентное смещение в отрицательных значениях, и они передвинут фоновое изображение на указанное значение в противоположенном направлении на соответствующей оси. Поэтому значения -10% -30% сместят изображение на 10% влево от левого края и на 30% вверх.
Поиграйте со значениями в следующем примере, чтобы увидеть, как меняется положение фонового изображения.
Позиционирование в предыдущих двух примерах делается относительно верхнего и левого краёв. Теперь давайте посмотрим, как можно объединить ключевые слова вместе с численными значениями смещения (процентами или абсолютными единицами), чтобы позиционировать изображения вдоль области позиционирования фона относительно любого из четырёх краёв элемента.
Смещение относительно любого края
В примерах из предыдущих двух разделов мы указывали смещения и видели, как они используются, чтобы переместить изображение относительно верхнего и левого края — т.е. поведение по умолчанию для одного или двух значений background — position .
Когда мы объединяем в четырёхзначный синтаксис ключевые слова для смещения с численными значениями, мы также можем сместить фоновое изображение от правого и нижнего краёв области позиционирования.
Чтобы это сделать, всё что нам надо, это указать название края, который нужно использовать, за которым должно следовать число (в абсолютных или процентных значениях), на которое сместится изображение от самого края.
Например, в следующем примере используется четырёхзначный синтаксис:
Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.
При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background — position : bottom 10 px right 20 px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.
Чтобы лучше это понять, поиграйтесь со значениями свойства background — position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.
Это особенно полезно, когда вам нужно по умолчанию позиционировать изображение на расстояние от правого и нижнего краёв, что сделает эту задачу намного легче, чем вынужденное высчитывание относительных смещений от верхнего и левого углов.
Установка размеров, повторение, обрезка изображений и многое другое!
Помните, что можно к элементу можно применять множественные фоновые изображения. Для каждого фонового изображения (представленных в виде списка изображений, разделённого запятыми в background — image ) можно указать соответствующую фоновую позицию; множественные позиции также разделяются запятыми.
В общем, есть девять CSS-свойств, которые управляют раскладкой, позиционированием, определением размеров и закрашиванием фоновых изображений, включая сокращённое свойство background, которое используется для установки и сброса других сокращённых свойств. Каждое свойство позволяет делать что-нибудь одно, а вместе они дают нам отличный контроль над тем, как применять фоновые изображения к любому элементу в HTML.
Кроме того, теперь, помимо основных свойств для фона, есть и дополнительные свойства, которые позволяют применять к фоновым изображениям эффекты наложения, похожие на эффекты, доступные в редакторах типа Photoshop — в частности, свойство background — blend — mode . Если вам интересно изучить всё о наложении в CSS, то можете прочитать об этом в этой статье.
Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.
P.S. Это тоже может быть интересно:
Если вам понравилась статья, поделитесь ей!
9 комментариев
Ошибка во второй картинке (где background-position: 50px(horizontal offset) 30px(vertical offset);): Как работают абсолютные значения background-position.
SelenIT :
Можете уточнить, где именно ошибка? По-моему, всё корректно (на горизонтальной оси отметка 50px, на вертикальной — 30px). В оригинале статьи так же…
Вопрос исчерпан, прошу извинить, все правильно. Стрелки смутили (точнее их направление). Немного сбивает с толку такая визуализация расстояний (стрелка смотрит вниз и кажется, что первое значение не горизонтальное а вертикальное)
Если честно, столкнулся с тем, что несмотря на то, что алгоритм заполнения фон, довольно интересный, его применение в синтаксисе, мне показалось совсем не интуитивным, поэтому хотелось бы отметить это подробней.
Возьмём такой, не замысловатый пример:background: radial-gradient(#f2f780, #254821 70%, #ffaecd 100%) 130% 0% / 200% 100%;
Вроде, без особого труда ясно, что через слэш представлены значения background-position / background-size (перечислены значения по координатам X и Y), давайте посмотрим как они работают во взаимодействии при различных значениях.
Отмечу, что радиальный градиент идёт по-умолчанию из центра (что легко меняется), то есть, из точки 50% 50%. Для простоты менять не будем. В нашем случае, по оси X размер градиента 200%, и центр исхождения световых слоёв будет находится посередине, то есть, на 100% по горизонтальной координате, центр — на краю левой стороны экрана. При этом градиент, по-умолчанию, идёт до дальнего угла изображения, в случае, когда градиент расположен по центру, до 100% края градиента доходят его углы в равной степени. По горизонтали и по вертикали градиент заканчивается задолго до 100% своего исхождения что видно на иллюстрации. Градиент как бы обрезается горизонтальными и вертикальными рамками, вписывается в прямоугольное окно и только в углах виден весь его спектр. Поскольку точка исхождения находится посередине, то левые и правые стороны находятся на одинаковом расстоянии от центра, поэтому «новый градиент» начинается с того же фона, на котором заканчивается текущий. Этими плитками заполняется виртуальное пространство.
В этой статье очень хорошо описан принцип расположения фоновых изображений: точка 70% изображения и видимой части экрана (браузера) совпадёт. Такой, довольно интересный принцип позволяет плавно сдвигать изображения так, чтоб 0% — изображение прижато к левому краю, 100% — к правому (точно такой же принцип может быть применён и для верха/низа). В результате 50% изображение будет в середине, 30%/70% — пропорционально ближе к левой/правой части экрана соответственно.
Тем не менее, нужно понять, как это принцип применяется, в частности, в таком, как оказалось не простом случае, как радиальный градиент.
В случае, когда градиент меньше размер экрана, он ведёт себя так, как описано в статье — перемещается влево/вправо по описанному выше алгоритму, свободные участки же заполняются другими градиентами.
Когда backgrond-size составляет 100%, то, понимая приведённый выше алгоритм лёгко понять, что background-position просто не работает, поскольку любая точка изображения совпадает с аналогичной точкой экрана, а поскольку любое позиционирование фона, это синхронизация изображения и экрана в определённой точке, то, поскольку все точки уже синхронизированы, то и перемещаться просто нечему (в случае когда backgrond-size равен 100% только по определённой координате, то изображение, соответственно не двигается по этой координате, но может двигаться по другой).
Понимание, что 100% экрана — это окно, а изображение попадает в это окно синхронизируясь с ним в точке указанной в background-position, можно понять и случаи когда фоновое изображение больше чем экран, а также как позиционируются точки большие, чем 100%.
Ну, во-первых, установим в указаном выше примере для background значения 100% 0% / 200% 100%, то есть, по оси X у нас background-size: 200%, а background-position: 100%. Что мы видим? Окончание горизонтальной части градиента совпадает с концом экрана (то есть самая левая точка градиента, совпадает с самой левой точкой экрана). При этом видно, что градиент больше размера экрана, и, поскольку больше он в два раза (200%), то середина градиента находится ровно в начале экрана, на его левой стороне. Нам понадобилось бы два экрана, чтоб отобразить градиент целиком, второй (виртуальный) экран должен расположиться слева.
Итак, берём точку 100% у изображения, синхронизируем её с аналогичной точкой экрана(в данном случае 100%), а дальше уже в единицах измерения экрана отмеряем видимую часть.
Так что же будет если background-position окажется больше 100%?
Рассмотрим, как раз случай данный в самом начале: 130% 0% / 200% 100%. Нас понятно интересуют значения по X, 200% размер градиента, 130 — позиционирование.
Что означает эта запись? размер градиента, понятна, равен двум экранам. И, внимание, точка, находящаяся на 130% градиента, совпадает со 130% точкой экрана. То есть, точка синхронизации уходит за размеры экрана и расположена на виртуальном экране справа.
Что получается? Берём точку 130% от 200-процентного градиента, это 260%. Эта точка совпадает со 130% точкой экрана. Соответственно убираем 30% виртуального экрана, у нас получается 230% это правый край экрана 130% левый край. Размер градиента — 200%, значит начнётся экран с угасания градиента на 130% точке (центр-то на 100%) дойдёт до 200% перейдёт в следующий градиент (градиенты идут последовательно один за другим заполняя виртуальное пространство, отображаясь там куда мы «притащим» наш экран), так вот в 200% точке один градиент кончится и начнётся другой, который пройдёт к центру ровно 30% экрана.
Вот, пожалуй, и всё — так они и заполняются ��На мой взгляд, не вполне интуитивно, как работают абсолютные и относительные размеры в сочетании.
В том же примере ставим, например:background: radial-gradient(#f2f780, #254821 70%, #ffaecd 100%) 130% calc(20% + 2em) / 200% 100%;
Ведь выяснилось же, что фон при background-size: 100% не сдвигается, потому как экран и изображения синхронизированы в каждой точке. Поэтому кажется, что в точке 20% + 2em всё будет тоже самое.
Но на деле, background-size: 100%, а background-position: calc(20% + 2em) у нас всё по горизонтальной координате сдвигается вниз на 2em.
В данном случае 20% ни на что ни влияют, мы можем поставить любое значение или вообще убрать calc и поставить 2em, ничего не изменится. Когда стоит значение без процентов, не изменится сдвиг, и если мы background-size поставим 200%.
Получается у нас как бы два измерения: позиционирование (это я так назвал подгонку фона под проценты экрана), измеряемое в процентах и зависит от background-size и абсолютные значения, которые ни от чего не зависят.
В принципе, в этом просматривается довольно стройная логика и возможности конкретного сдвига и тонкой подстройки в соответствии с экраном. Но в тоже время когда и то, и другое используется в одной и той же настройке, эта логика, на мой взгляд, не вполне прозрачна…SelenIT :
Возможно, удобнее будет рассматривать проценты в background-position как проценты от разницы между размером блока и размером фона — так сказать, «от оставшегося доступного места» (и считать их от левого верхнего угла блока до левого верхнего угла фона). Результат тот же, но так может быть нагляднее. Тогда сразу видно, что при background-size:100% любое количество процентов от «доступного места» равно нулю, поэтому и не влияет на общую сумму в calc() . А при background-size больше 100% эта разница оказывается отрицательной, и проценты от нее, соответственно, тоже — поэтому с положительным значением в процентах фон тогда смещается за край контейнера наружу.
Тут ещё есть вот какой момент, когда мы ТАК, двигаем градиент, у нас может получиться как в первом шарике вот этой иллюстрации — градиент «не дотягивается» до края шара, поскольку «прямоугольник мозаики» его обрезает. Можно, наверное, делать и через background-size (хотя зачем там calc, впрочем с ним, пожалуй, нагляднее). Но так вообще, подобный синтаксис, без комментариев разработчика, в некотором роде, вносит некоторую путаницу, когда стараешься его понять, и выяснить, что вообще за что отвечает. Создаётся впечатление, что эти 50% что-то решают (а они ничего не решают, пока background-size: 100%, то является значением по-умолчанию). И центр градиента, вроде как, устанавливается этими 50% calc(50% + 2em), тогда как градиент они вообще не трогают, а двигают фон. Но ведь можно двигать и градиент! И, возможно, это более точное решение, поскольку меняет именно те параметры, которые отвечают за нужные нам свойства…
По поводу «оставшегося свободного места» — согласен, довольно интуитивная идея. Двигаем на оставшуюся разницу ��
Есть фон и есть экран, насколько в процентах сдвигается одно, настолько двигается и другое. А на получившуюся разницу в абсолютных величинах, сдвигается центр фона. Если проведём радиус из центра экрана до синхронизируемой точки, то центр фона будет располагаться на прямой, построенной через эти две точки. Если фон меньше, то и радиус у него меньше чем у экрана, и его центр из исходной точки «не дотягивается» до центра экрана. Если фон = экрану, то центры совпадают. Если радиус фона больше, то центр фона уходит в противоположную сторону.
Легко увидеть на той же иллюстрации/a>, установив значения (после градиента) в 100% 0% / 200% 100%, то есть, сделав фон в два раза больше экрана. Можно увидеть куда фон «уйдёт». Ну и далее, поигравшись со значениями и усвоить как движется фон, относительно экрана.Хм, жаль сообщения нельзя редактировать �� Увидел пару неточностей, но надеюсь, Вы поймёте где о чём идёт речь…
Css картинка на задний план
В данной статье речь пойдет о том, как поместить слой или элемент в HTML на передний/задний план при помощи CSS . А точнее при помощи свойства z-index .
Скорее всего, каждый из вас в детстве делал Аппликации . Это процесс, когда на лист бумаги поверх вы приклеиваете различные элементы — дома, деревья, облака и так далее. Получается что-то вроде подобия 3-d изображения, где каждый элемент, далее просто слой, наклеен поверх другого. Все они наклеены на лист бумаги.
HTML с помощью CSS позволяет получить аналогичную картинку, только на веб-страничке. Каждый из элементов можно наклеить поверх других при необходимости.
Когда такое может понадобиться? Если вы любитель поиграться с position и положением относительно экрана, может так получится, что один элемент у вас будет перекрывать другой, но вам нужно вытащить закрытый элемент на передний план. Еще часто без определения элементов на задний/передние планы сложно реализовать ту или иную штуку из дизайна, который задумывал не программист, а дизайнер. В общем, область применения у этого свойства очень широкая и ограничивается только вашей фантазией.
Для начала стоит запомнить, что z-index не работает, если у элемента не задано свойство position с значениями absolute , relative или fixed . Это имеет место, так как накладываться, а следственно и размещать их на различных уровнях слоев нужно будет, только если вы начнете наезжать одним элементом на другой за счет position и bottom , top , left , right . Но не только в этом случае может понадобиться расставление z-index . Наезжать элементами друг на друга можно за счет отрицательных значений margin и другими способами.
Если вы не указываете z-index , то для всех элементов по-умолчанию он равен 0 . z-index может принимать как положительные так отрицательные целые значения. В случае значения по-умолчанию элементы будут накладываться друг на друга по тому, чем дальше прописан элемент в коде тем он будет на более переднем плане(в Демо пример №1).
Вот как может выглядеть код CSS -стилей для 3
Важно понимать, что браузер будет сравнивать z-index только у элементо расположенных на одном уровне вложенности и, даже если у внутреннего элемента z-index больше, чем у элементов расположенных на одном уровне с его родителем, то он будет отображаться на заднем плане по отношению к ним (в Демо пример №3).
Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.
Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent .
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.
Свойства фона html-элементов
- Содержание:
- 1. Базовый цвет: свойство background-color
- 2. Источник изображения: свойство background-image
- 3. Укладка изображений: свойство background-repeat
- 4. Фиксация изображения: свойство background-attachment
- 5. Позиционирование изображений: свойство background-position
- 6. Область рисования: свойство background-clip
- 7. Область расположения фона: свойство background-origin
- 8. Размер изображений: свойство background-size
- 9. Краткая запись свойств фона: свойство background
- 10. Множественные фоны
1. Базовый цвет: свойство background-color
Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.
Свойство не наследуется.
background-color Значения: цвет Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent . initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
Рис. 1. Свойство background-color для разных элементов
2. Источник изображения: свойство background-image
Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.
Семантически важные изображения должны предоставляться в разметке документа, например, с тегом .
Свойство не наследуется.
background-image Значения: изображение Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none . inherit Наследует значение свойства от родительского элемента. 3. Укладка изображений: свойство background-repeat
Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.
background-repeat Значения: repeat-x Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat . repeat-y Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat . repeat Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию. space Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space . round Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round . no-repeat Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repea t. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
Рис. 2. Свойство background-repeat
4. Фиксация изображения: свойство background-attachment
Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.
Свойство не наследуется.
background-attachment Значения: scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. local Фоновое изображение прокручивается вместе с содержимым элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.
Свойство не наследуется.
background-position Значения: % Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% . длина Значение длины дает фиксированную длину в качестве смещения. left Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края. center Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано. right Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края. top Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края. bottom Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.
Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.
Если заданы три или четыре значения в единицах длины или % , то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.
Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.
Рис. 3. Свойство background-position
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
Рис. 4. Фоновое изображение по низу блока
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
Рис. 5. Задание для блока нескольких фоновых изображений
6. Область рисования: свойство background-clip
Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.
Свойство не наследуется.
background-clip Значения: border-box Фон закрашивает область в пределах рамки элемента. Значение по умолчанию. padding-box Фон закрашивает область в пределах внутренних полей элемента. content-box Фон закрашивает только область содержимого. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
Рис. 6. Свойство background-clip
7. Область расположения фона: свойство background-origin
Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).
Свойство не наследуется.
background-origin Значения: padding-box Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию. border-box Фон позиционируется относительно верхних границ рамки элемента. content-box Фон позиционируется относительно верхних границ области содержимого элемента. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.
Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.
Рис. 7. Свойство background-origin
8. Размер изображений: свойство background-size
Свойство background-size устанавливает размер фоновых изображений.
Свойство не наследуется.
background-size Значения: auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. длина Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em . % Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. initial Устанавливает значение свойства в значение по умолчанию. inherit Наследует значение свойства от родительского элемента. 
Рис. 8. Свойство background-size
9. Краткая запись свойств фона: свойство background
Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .
10. Множественные фоны
Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Рис. 9. Пример использования нескольких фоновых изображений
Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).
Итак, требования к фоновому изображению у нас следующие:
- Покрывается 100% ширины и высоты страницы
- Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
- Сохраняются пропорции картинки (aspect ratio)
- Изображение центрировано на странице
- Фон не вызывает скроллов
- Решение максимально кроссбраузерное
- Не используются никакие другие технологии кроме CSS
Способ 1
На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.
Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .
Этот способ работает в
Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+
Способ 2
В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.
Этот способ работает в:
- Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
- IE 9+
Способ 3
Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.
Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в
Этот способ работает в хороших браузерах и IE 8+.
Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.
Работа с фоном элемента в CSS
В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.
Для того чтобы Вы смогли создавать по настоящему красочные, яркие и уникальные сайты, вам необходимо познакомиться и изучить методы работы с задним фоном и с таким свойством как background-image, которое позволяет задать одно или несколько фоновых изображений для элемента.
Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.
В настоящее время браузеры работают с тремя графическими форматами:
- GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
- JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
- PNG (англ. Portable network graphics — растровый формат хранения графической информации).
Чтобы задать изображение в качестве заднего фона необходимо использовать свойство background-image и указать путь к файлу изображения, который может быть как относительный, так и абсолютный:
Обращаю Ваше внимание на то, что при использовании относительного пути фоновое изображение необходимо указывать относительно адреса файла таблицы стилей, а не HTML страницы на которой предполагается использование фонового изображение.
Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента :
По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент полностью заполнился фоновым изображением.
Желательно всегда устанавливать цвет заднего фона в качестве альтернативы изображению, в этом случае, если изображение по каким-то причинам не будет загружено, то будет использован заданный Вами цвет. Запомните этот момент, мы не будем к нему возвращаться в статьях этого учебника.
Результат нашего примера:
Рис. 115 Пример установки изображения в качестве фона.
Управление повтором фонового изображения
Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.
Это свойство имеет следующие доступные значения:
Значение Описание repeat Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию. repeat-x Фоновое изображение будет повторяться по горизонтали (по оси x). repeat-y Фоновое изображение будет повторяться по вертикали (по оси y). no-repeat Фоновое изображение не будет повторяться. Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.
По аналогии с предыдущим примером для мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:
- Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat ), это значение чаще всего используется в работе.
- Второй блок получил значение repeat-x , которое определяет, что фоновое изображение будет дублироваться по горизонтали.
- Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y ).
Результат нашего примера:
Рис. 116 Пример управления повтором фонового изображения.
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:
Значение Описание left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottomЗадает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» x% y% Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%. 
x y Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения. Рассмотрим пример использования этого свойства:
В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.
Результат нашего примера:
Рис. 117 Пример позиционирования фонового изображения.
Фиксированный задний фон
Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами CSS вы можете изменить такое поведение заднего фона, например, зафиксировав его.
Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.
В данном примере для всех элементов мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.
Результат нашего примера:
Рис. 118 Пример фиксированного фонового изображения.
Свойства CSS 3 для работы с фоновыми изображениями
Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.
И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.
Возможные значения этого свойства:
Значение Описание padding-box Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию. border-box Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента). content-box Фоновое изображение позиционируется от верхнего левого угла содержимого элемента. Рассмотрим применение этого свойства:
В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:
- Первый блок ( padding-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
- Второй блок ( border-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
- Третий блок ( content-box ) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).
Результат нашего примера:
Рис. 119 Пример использования свойства background-origin.
И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.
У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin alt=»css3″ /> и background-clip alt=»css3″ />?
Разница заключается в том, что свойство background-clip
в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.В таблице представлены возможные значения этого свойства:
Значение Описание border-box Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию. padding-box Фон элемента занимает все пространство (не включая границ элемента). content-box Фон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено). Давайте рассмотрим следующий пример:
В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:
- Первый блок ( padding-box ) — фон элемента занимает все пространство. Это значение по умолчанию.
- Второй блок ( border-box ) — фон элемента занимает все пространство (не включая границы элемента).
- Третий блок ( content-box ) — фон элемента занимает все содержимое элемента.
Результат нашего примера:
Рис. 120 Пример использования свойства background-clip.
Как вы могли заметить свойства background-origin alt=»css3″ /> и background-clip alt=»css3″ />, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.
На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.
Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:
Значение Описание auto Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию. length Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto . % Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto . cover Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения. contain Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента. Рассмотрим применение этого свойства:
В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:
- Первый блок ( auto ) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
- Второй блок ( 100px 100px ) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
- Третий блок ( 70% 70% ) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
- Четвертый блок ( cover ) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
- Пятый блок ( contain ) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.
Результат нашего примера:
Рис. 121 Пример масштабирования фоновых изображений.
Универсальное свойство background
Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.
Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.
Свойство background имеет следующий синтаксис:
Где значения соответствуют вышерассмотренным нами свойствам:
-
( color | transparent ). ( url | none ). ( значение ). ( auto | length | cover | contain ). ( repeat | repeat-x |repeat-y | no-repeat ). ( padding-box | border-box | content-box ). ( border-box | padding-box | content-box ). ( scroll | fixed | local ).
Давайте рассмотрим пример использования универсального свойства background:
И так, что мы сделали в этом примере:
- Мы установили для элементов и высоту 100% , убрали внутренние и внешние отступы.
- Для элемента
задали минимальную высоту равную 34% от родительского элемента, ширину установили 100% . В качестве заднего фона установили изображение — url(‘cat_g.jpg’) , позиционировали его по низу и масштабировали фоновое изображение под размеры элемента ( center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет. - Для элемента с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100% . В качестве заднего фона установили два различных изображения, позиционировали их по центру ( center ) и масштабировали их (первое изображение полностью помещается — значение contain , второе изображение масштабируется под размеры элемента cover ).
Результат нашей работы:
Рис. 122 Пример использования универсального свойства background.
Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо. Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:
Практическое задание № 28.
Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
background-position¶
Свойство background-position задаёт начальное положение фонового изображения, установленного с помощью свойства background-image .
Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.
Синтаксис¶
Значения¶
У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- right top = top right = 100% 0% (в правом верхнем углу)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- center = center center = 50% 50% (по центру)
- right = right center = center right = 100% 50% (по правому краю и по центру)
- bottom left = left bottom = 0% 100% (в левом нижнем углу)
- bottom = bottom center = center bottom = 50% 100% (по центру внизу)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.
Похожие публикации:
- Как поменять фон в html css
- Как поменять шрифт текста в css
- Как поставить библиотеку в arduino
- Как поставить свой спрей в css v34
Размещение объектов
Узнайте, как Illustrator размещает объекты и как изменить порядок их размещения.
Illustrator размещает нарисованные объекты последовательно, начиная с первого нарисованного объекта.
При наличии перекрывающихся объектов порядок размещения (также называемый порядок рисования) объектов определяет порядок отображения, а порядок размещения зависит от используемого режима рисования.
Добавление новых объектов в порядке размещения
Можно добавлять новые объекты в порядок размещения, используя режим Рисовать в стандартном режиме или Рисовать за объектами :
Использование стандартного режима рисования
Выберите режим Рисовать в стандартном режиме , чтобы добавить новый объект поверх выбранного слоя.
Использование режима рисования за объектами
Выберите режим Рисовать за объектами , чтобы добавить новый объект за выбранным слоем.
Графический объект в начале палитры Слои находится спереди по порядку размещения, а графический объект в конце палитры Слои находится сзади по порядку размещения. В пределах слоя объекты также размещаются аналогичным образом. Можно управлять отображением перекрывающихся объектов, путем добавления нескольких слоев в свою иллюстрацию.
Изменение порядка размещения с помощью палитры «Слои»
Используйте любой из этих вариантов, чтобы изменить порядок размещения с помощью палитры Слои :
Перетащите имя объекта и отпустите кнопку мыши, когда черные метки вставки окажутся в нужном месте.
Откройте Объект > Упорядочить и выберите На передний план , Переместить вперед , На задний план , Переместить назад или Переместить в активный слой .
-
Чтобы расположить элементы в обратном порядке на палитре Слои , нажмите клавишу Ctrl (в Windows) или Command (в macOS) и, не отпуская ее, щелкните названия элементов и выберите В обратном порядке в меню палитры Слои .
Примечание.
Для отображения в обратном порядке элементы должны находиться на одном уровне в иерархии слоев.Изменение порядка размещения с помощью параметров упорядочивания
Выберите любой из следующих параметров:
Чтобы переместить объект на верхнюю или нижнюю позицию в группе или слое, выделите объект, который нужно переместить, и выберите Объект > Упорядочить > На передний план или Объект > Упорядочить > На задний план .
Чтобы переместить объект на одну позицию вперед или на одну позицию назад в порядке размещения, выделите объект, который нужно переместить, после чего выберите Объект > Упорядочить > Переместить вперед или Объект > Упорядочить > Переместить назад .
Примечание.
Нельзя переместить контур, группу или составной элемент на верхнюю позицию в палитре Слои : на верхней позиции в иерархии слоев могут находиться только слои.