Position html background: background-position | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

позиция фона — учебник 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 — фиксация фона.

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

background-position-x и background-position-y.

Значения background-position

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

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


div {
	background-position-x: left;
}

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

top — фоновый рисунок прилеплен к верхней стороне элемента;

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


div {
	background-position-y: bottom;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

seodon.ru | CSS справочник — background-position

Опубликовано: 18.08.2010 Последняя правка: 10.12.2015

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

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

Тип свойства

Назначение: цвет и фон.

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

Наследуется: нет.

Значения

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

Проценты — числа со знаком процента (%) на конце, где за 100% берется ширина или высота области позиционирования элемента. Отсчет ведется от левого верхнего угла этой области. Допускается указывать отрицательные значения (-20%).
Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже допустимо указывать отрицательные значения и тоже отсчет ведется от левого верхнего угла.
top — ключевое слово, означающее то же, что и 0% по вертикали (верх области).
right — значение, означающее то же, что и 100% по горизонтали (правая сторона области).
bottom — эквивалентно 100% по вертикали (низ области).
left — то же, что и 0% по горизонтали (левая сторона области).
center — то же, что и 50% по горизонтали или вертикали (центр области позиционирования по горизонтали или вертикали).
inherit — наследует значение background-position от родительского элемента.

Процентная запись: относительно размеров самого элемента.

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

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

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

Синтаксис

background-position: [проценты | размеры | left | center | right] || [проценты | размеры | top | center | bottom] | inherit

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство background-position</title>
  <style type="text/css">
   div {
    background: url('images/elka.gif') no-repeat; /* адрес картинки
                                            и запрет на повторение */
    height:200px; /* высота блоков DIV */
   }
   .div1 {
    background-color: #ccff99; /* цвет фона */
    background-position: 5cm 20px; /* позиция фона */
   }
   .div2 {
    background-color: #ff99cc;
    background-position:center 110px;
   }
   .div3 {
    background-color: #99ccff;
    background-position: right;
   }
  </style>
 </head>
 <body>
  <div>DIV1 - background-position: 5cm 20px.</div>
  <div>DIV2 - background-position: center 110px.</div>
  <div>DIV3 - background-position: right.</div>
 </body>
</html>

Результат примера

Версии 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.

перевод на русский, синонимы, антонимы, произношение, примеры предложений, транскрипция, значение, словосочетания

Другие результаты
The proposed position would have a sound background in one of the Unit’s disciplines and coordinate all operations within the Unit.	Сотрудник на этой предлагаемой должности будет знающим специалистом в одной из областей работы Группы и будет координировать все операции внутри Группы.
Against that background, I should like to emphasize the main points of Croatia’s position on the subject of General Assembly reform.	В этой связи я хотел бы выделить основные положения позиции Хорватии в вопросе, касающемся реформы Генеральной Ассамблеи. Генеральная Ассамблея является единственным главным органом Организации Объединенных Наций, в котором все государства-члены имеют равные возможности участия в процессе принятия решений.
Otherwise I think it is negligent on the part of this article not to mention his Muslim background and I maintain my position on that.	В противном случае я считаю небрежным со стороны этой статьи не упоминать о его мусульманском происхождении, и я поддерживаю свою позицию по этому вопросу.
Merrick comes from a working-class background and keenly feels his inferior position in British society.	Меррик происходит из рабочего класса и остро ощущает свое низкое положение в британском обществе.
I understand Savior59 is attempting to point out the position in background that “issue is not a sectarian factor in the power game”.	Я понимаю, что Savior59 пытается указать на позицию в фоновом режиме, что проблема не является сектантским фактором в игре власти.
In natural settings full of highly complex background motion, hummingbirds are able to precisely hover in place by rapid coordination of vision with body position.	В естественных условиях, полных очень сложных фоновых движений, колибри способны точно парить на месте благодаря быстрой координации зрения с положением тела.
However, overturn a position he is dominant in because of his background due to the arguments being simplistic or misrepresented with no evidence to support itself.	Однако опрокиньте позицию, в которой он доминирует из-за своего происхождения из-за того, что аргументы упрощены или искажены без доказательств, чтобы поддержать себя.
Similarly, some truths seem to be relative to one’s position or background, while others appear absolute.	Точно так же некоторые истины кажутся относительными к положению человека или его происхождению, в то время как другие кажутся абсолютными.
The puppeteers manipulate the puppets under the light, while they position themselves unseen against the black unlit background.	Кукольники манипулируют куклами под светом, в то время как сами они находятся невидимыми на черном неосвещенном фоне.
The man is positioned within an undefined narrow space and set against a flat black background.	Человек помещен в неопределенное узкое пространство и расположен на плоском черном фоне.
With Islamic religious background of complementarianism and places a greater number of men than women in positions of religious and political power.	С исламским религиозным фоном комплементарность и ставит большее число мужчин, чем женщин, на позиции религиозной и политической власти.
All positions require State Police and FBI background checks.	Все должности требуют проверки в полиции штата и ФБР.

Html div background image — Вэб-шпаргалка для интернет предпринимателей!

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

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

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

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 — полную прозрачность.

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

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

Каждый блок 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. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.

background-position — CSS: Каскадные таблицы стилей

Свойство CSS background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно слоя положения, установленного параметром background-origin .

 
фон-позиция: вверху;
background-position: bottom;
фоновое положение: слева;
background-position: right;
background-position: center;


фоновая позиция: 25% 75%;


background-position: 0 0;
положение фона: 1 см 2 см;
background-position: 10ch 8em;


background-position: 0 0, в центре;


background-position: нижние 10 пикселей справа 20 пикселей;
background-position: right 3em bottom 10px;
background-position: нижние 10 пикселей справа;
background-position: верхний правый 10px;


фоновая позиция: наследовать;
фоновая позиция: начальная;
фоновая позиция: вернуться;
background-position: не задано;

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

Значения

<позиция>

A <позиция> . Позиция определяет координату x / y для размещения элемента относительно краев рамки элемента. Его можно определить, используя от одного до четырех значений. Если используются два значения, не являющиеся ключевыми словами, первое значение представляет положение по горизонтали, а второе — положение по вертикали. Если указано только одно значение, предполагается, что второе значение будет , центр . Если используются три или четыре значения, значения в процентах длины являются смещениями для предшествующих значений ключевого слова.

Синтаксис с одним значением: значение может быть:

Значение ключевого слова center , которое центрирует изображение.
Одно из значений ключевого слова верхний , левый , нижний , правый . Это определяет край, по которому следует разместить элемент. Другой размер затем устанавливается на 50%, поэтому элемент помещается в середину указанного края.
A <длина> или <процент> .Это определяет координату X относительно левого края, при этом координата Y установлена на 50%.

Синтаксис с двумя значениями: одно значение определяет X, а другое определяет Y. Каждое значение может быть:

Одно из значений ключевого слова верхний , левый , нижний , правый . Если здесь даны слева или справа , то это определяет X, а другое заданное значение определяет Y. Если заданы верхний или нижний , то это определяет Y, а другое значение определяет X.
A <длина> или <процент> . Если другое значение — слева или справа , то это значение определяет Y относительно верхнего края. Если другое значение — верхний или нижний , то это значение определяет X относительно левого края. Если оба значения равны <длина> или <процент> значений, то первое определяет X, а второе Y.
Обратите внимание: если одно значение — верхний или нижний , то другое значение может не быть верхним или нижним .Если одно значение равно слева или справа , то другое значение не может быть слева или справа . Это означает, например, что верхний верх и левый правый недействительны.
Значение по умолчанию: вверху слева или 0% 0% .

Синтаксис с тремя значениями: Два значения — это значения ключевых слов, а третье — смещение для предыдущего значения:

Первое значение — это одно из значений ключевого слова верхний , левый , нижний , правый или центральный .Если здесь даны слева или справа , то это определяет X. Если даны верхний или нижний , то это определяет Y, а значение другого ключевого слова определяет X.
Значение <длина> или <процент> , если это второе значение, является смещением для первого значения. Если это третье значение, это смещение для второго значения.
Одиночная длина или процентное значение — это смещение для значения ключевого слова, которое ему предшествует.Комбинация одного ключевого слова с двумя значениями или недопустима.

Синтаксис с 4 значениями: Первое и третье значения — это значения ключевого слова, определяющие X и Y. Второе и четвертое значения — смещения для предшествующих значений ключевого слова X и Y:

Первое значение и третье значения одно из значений ключевого слова верхний , левый , нижний , правый . Если здесь указано слева или справа , то это определяет X.Если заданы верхний или нижний , то это определяет Y, а значение другого ключевого слова определяет X.
Второе и четвертое значения — <длина> или <процент> значений. Второе значение — это смещение для первого ключевого слова. Четвертое значение — это смещение для второго ключевого слова.

Что касается процентов:

Процентное смещение положения данного фонового изображения относительно контейнера.Значение 0% означает, что левый (или верхний) край фонового изображения выровнен с соответствующим левым (или верхним) краем контейнера, или отметка 0% изображения будет на отметке 0% контейнер. Значение 100% означает, что правый (или нижний ) край фонового изображения выровнен с правым (или нижним ) краем контейнера, или отметка 100% изображения будет на отметке 100% емкости. Таким образом, значение 50% по горизонтали или вертикали центрирует фоновое изображение, поскольку 50% изображения будет на отметке 50% контейнера.Точно так же background-position: 25% 75% означает, что пятно на изображении, которое находится на 25% слева и 75% сверху, будет размещено в месте контейнера, которое находится на 25% слева от контейнера и 75 % от верха контейнера.

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

 (ширина контейнера - ширина изображения) * (позиция x%) = (значение смещения x)
(высота контейнера - высота изображения) * (позиция y%) = (значение смещения y)

Используя ось X в качестве примера, предположим, что у нас есть изображение шириной 300 пикселей, и мы используем его в контейнере шириной 100 пикселей с размером фона, установленным на auto:

 100 пикселей - 300 пикселей = -200 пикселей (разница между контейнером и изображением)

Таким образом, при процентном соотношении позиций -25%, 0%, 50%, 100%, 125% мы получаем следующие значения смещения края изображения до контейнера:

 -200 пикселей * -25% = 50 пикселей
-200 пикселей * 0% = 0 пикселей
-200 пикселей * 50% = -100 пикселей
-200 пикселей * 100% = -200 пикселей
-200 пикселей * 125% = -250 пикселей

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

+ 50 пикселей (размещение левого края изображения в центре контейнера шириной 100 пикселей)
0px (левый край изображения совпадает с левым краем контейнера)
-100 пикселей (левый край изображения на 100 пикселей слева от контейнера, в этом примере это означает, что средняя область изображения 100 пикселей центрирована в контейнере)
-200 пикселей (левый край изображения на 200 пикселей слева от контейнера, в этом примере это означает, что правый край изображения совпадает с правым краем контейнера)
–250 пикселей (левый край изображения на 250 пикселей слева от контейнера, в этом примере правый край изображения шириной 300 пикселей помещается в центр контейнера)

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

Начальное значение	`0% 0%`
Применяется ко всем элементам	. Это также относится к `:: первая буква` и `:: первая строка` .
Унаследовано	нет
Проценты	относятся к размеру области позиционирования фона за вычетом размера фонового изображения; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений
Вычисленное значение	как каждое из свойств сокращения: `background-position-x` : список, каждый элемент состоит из : смещение, заданное как комбинация абсолютной длины и процента, плюс ключевое слово origin `background-position-y` : список, каждый элемент которого состоит из: смещения, заданного как комбинация абсолютной длины и процента , плюс ключевое слово origin
Тип анимации	повторяемый список простого списка длины, процента или вычисления

Позиционирование фоновых изображений

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

HTML

   Пример первый 
 Пример второй 
 Пример третий

CSS

 
div {
  цвет фона: # FFEE99;
  фон-повтор: без повторения;
  ширина: 300 пикселей;
  высота: 80 пикселей;
  нижнее поле: 12 пикселей;
}


.exampleone {
  фон: url ("startransparent.gif ") # FFEE99 2,5 см снизу без повтора;
}
.exampletwo {
  фон: url ("startransparent.gif") # FFEE99 слева 4em внизу 1em no-repeat;
}


.examplethree {
  фоновое изображение: url ("startransparent.gif"),
                       url ("catfront.png");
  background-position: 0px 0px,
                       правая 3em нижняя 2em;
}

Результат

Таблицы BCD загружаются только в браузере

background-position-x — CSS: Cascading Style Sheets

Свойство CSS background-position-x устанавливает начальное положение по горизонтали для каждого фонового изображения.Положение относительно слоя положения, установленного параметром background-origin .

Значение этого свойства переопределяется любым объявлением сокращенных свойств background или background-position , применяемых к элементу после него.

 
фон-позиция-x: слева;
background-position-x: center;
background-position-x: right;


background-position-x: 25%;


фон-позиция-x: 0px;
background-position-x: 1 см;
фон-позиция-x: 8em;


background-position-x: right 3px;
background-position-x: слева 25%;


background-position-x: 0px, по центру;


фон-позиция-x: наследовать;
фон-позиция-x: начальная;
фон-позиция-x: вернуться;
background-position-x: отключено;

Свойство background-position-x задается как одно или несколько значений, разделенных запятыми.

Значения

слева: Выравнивает левый край фонового изображения по левому краю слоя положения фона.
центр: Выравнивает центр фонового изображения по центру слоя положения фона.
правый: Выравнивает правый край фонового изображения по правому краю слоя положения фона.
<длина>: Смещение левого вертикального края заданного фонового изображения от левого вертикального края слоя положения фона. (Некоторые браузеры позволяют назначать для смещения правый край).
<процент>: Смещение горизонтального положения заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнер, поэтому значение 50% центрирует фоновое изображение по горизонтали.

90 min257 Относится к

90 мин.
Исходное значение	`слева`
Применимо к	всем элементам
Унаследовано	нет
Вычисленное значение	Список, каждый элемент которого состоит из: смещения, заданного как комбинация абсолютной длины и процента, плюс ключевое слово origin
Тип анимации	дискретный

Базовый пример

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

HTML

CSS

  div {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  цвет фона: голубой;
  background-image: url (https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png);
  фон-повтор: без повторения;
  background-position-x: center;
  background-position-y: нижние 10 пикселей;
}

Результат

Таблицы BCD загружаются только в браузере

background-position · Документы WebPlatform

Резюме

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

Обзорная таблица

Начальное значение: 0% 0%
Относится к: Все элементы
Унаследовано: Нет
Медиа: визуальный
Расчетное значение: Список, каждый элемент которого состоит из: двух ключевых слов, представляющих начало координат, и двух смещений от этого источника, каждое из которых задано как абсолютная длина (если задано ), в противном случае — в процентах.
Анимационный: Да
Свойство объектной модели CSS: фон Позиция
процентов: См. Размер области позиционирования фона за вычетом размера фонового изображения.

Синтаксис

background-position: 30% 15%, 40% 80%, 10px 10px
background-position: length length
background-position: процентное соотношение
background-position: процент
background-position: снизу длина справа длина
background-position: left вверху

Значения

длина длина: В качестве значений background-position принимаются любые стандартные единицы CSS: px, ems, rems, мм, см и т. Д.Обратите внимание, что значения единиц определяют расстояние между верхним левым углом фонового изображения и верхним левым углом элемента. Дополнительные сведения об этих единицах измерения см. В разделе «Единицы длины».
процентов процентов: Процентные значения приемлемы для значений background-position и определяют процентные значения от общей ширины и высоты рассматриваемого элемента. Обратите внимание, что процентные значения определяют расстояние между верхним левым углом фонового изображения и верхним левым углом элемента.
слева вверху: background-position также можно выразить как ключевые слова: left top, top, right top, left, center, right, left bottom, bottom, right bottom. Эти значения не относятся конкретно к положению верхнего левого угла фонового изображения, а скорее относятся к общему положению фонового изображения внутри элемента. Так, например, значение right top заставит сайт фонового изображения выровняться с верхней и правой сторонами элемента, к которому оно применяется; верхний левый угол не будет помещен в верхний правый угол элемента!
процента: Если включено только одно значение, оно принимается как значение по горизонтали, а значение по вертикали устанавливается как , центр .
30% 15%, 40% 80%, 10 пикселей 10 пикселей: Если вы применили несколько фоновых изображений к элементу, вы можете дать каждому фоновому изображению другое положение, указав несколько значений положения фона, разделенных запятыми. Предоставленные значения будут циклически меняться так, что всем изображениям будет присвоено background-position , например, если указаны четыре фоновых изображения и только два значения положения, позиция 1 будет применена к изображениям 1 и 3, а позиция 2 — к изображениям 2 и 4.
длина снизу длина справа: CSS3 включает новый синтаксис с четырьмя значениями background-position , который позволяет вам выбрать, с каких сторон элемента вы позиционируете фоновое изображение относительно (значения 1 и 3), а затем расстояние от этих сторон (значения 2 и 4). Итак, в этом примере говорится, что вы хотите расположить фоновое изображение на 10 пикселей от нижнего края элемента и на 15 пикселей справа. Если вы пропустите одно из значений смещения, другое принимается равным 0.

Примеры

Простой набор из пяти блоков.

   Один 
 Два 
 Три 
 Четыре 
 Пять

Этот CSS применяет одно и то же фоновое изображение и базовый стиль к каждому div, но затем каждому div дается различная позиция фона, чтобы варьировать, где размещается фоновое изображение.

  div {
  фоновое изображение: URL (images / icon.png);
  фон-повтор: без повторения;
  семейство шрифтов: без засечек;
  размер шрифта: 16 пикселей;
  межбуквенный интервал: -1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
  маржа справа: 10 пикселей;
  граница: 1px solid #aaa;
  плыть налево;
  высота строки: 100 пикселей;
  выравнивание текста: центр;
  радиус границы: 10 пикселей;
  текст-преобразование: прописные буквы;
  тень текста: 1px 1px 1px черный;
  box-shadow: 2px 2px 5px #ccc;
  padding-top: 2 пикселя;
}


.один {
  фоновая позиция: вверху слева;
}

.два {
  фоновое положение: 2 бэр 1 бэр;
}

.три {
  фоновая позиция: 40% 80%;
}

.four {
  фоновая позиция: 30 пикселей;
}

.5 {
  background-position: нижние 30 пикселей справа 50 пикселей;
}

Посмотреть живой пример

Внешний контейнерный блок с несколькими внутренними блоками.

Каждому внутреннему div присваивается один и тот же базовый стиль, и к нему применено одно и то же фоновое изображение.Затем каждому отдельному div присваиваются разные значения top и left, чтобы расположить его в другом месте, и другое значение background-position для отображения другого спрайта. Каждый спрайт имеет размер 128 x 128 пикселей, а внутренние блоки div имеют размер 128 x 128 пикселей, поэтому каждый из них будет отображать одновременно только один спрайт. Вам нужно правильно расположить фон, чтобы отображался весь спрайт, а не часть двух спрайтов.

  body> div {
  ширина: 1024 пикселей;
  высота: 640 пикселей;
  маржа: 5бэр авто;
  фон: linear-gradient (вверху справа, rgba (0,0,0,0), rgba (0,0,0,0.4));
  цвет фона: #ccc;
  радиус границы: 64 пикселя;
  box-shadow: 0px 0px 30px черный;
  положение: относительное;
}

div div {
  ширина: 128 пикселей;
  высота: 128 пикселей;
  позиция: абсолютная;
  фон: url (sprites.png);
}

#спасти {
  верх: 64px;
  слева: 64px;
  фоновая позиция: 0px 0px;
}

#настройки {
  верх: 192px;
  слева: 192px;
  background-position: -128px 0px;
}

#люди {
  верх: 320 пикселей;
  слева: 448 пикселей;
  background-position: -256px 0px;
}

#поиск {
  верх: 320 пикселей;
  слева: 64px;
  фоновая позиция: -384px 0px;
}

#отменить {
  верх: 448 пикселей;
  слева: 576 пикселей;
  background-position: -512px 0px;
}

#хорошо {
  верх: 448 пикселей;
  слева: 704px;
  background-position: -640px 0px;
}

#назад {
  верх: 192px;
  слева: 832px;
  background-position: -768px 0px;
}

#вперед {
  верх: 320 пикселей;
  слева: 832px;
  background-position: -896px 0px;
}

Посмотреть живой пример

Использование

  * background-position хорошо поддерживается во всех браузерах.Однако имейте в виду, что некоторые типы данных CSS являются недавним дополнением к языку и не поддерживаются в старых браузерах.

CSS-спрайты — это очень распространенный метод, используемый для отображения нескольких небольших изображений на веб-странице с уменьшением размера файла и HTTP-запросов. Все изображения, о которых идет речь, хранятся в одном файле изображения, который применяется к нескольким различным элементам на странице; различные части этого файла затем отображаются путем изменения значений background-position .См. Пример 2 для этого в действии.
Синтаксис с четырьмя значениями не очень широко поддерживается браузерами.

Связанные спецификации

CSS 2.1 Цвета и фон: Рекомендация W3C
CSS Backgrounds and Borders Module Level 3: W3C кандидат в рекомендации

См. Также

Статьи по теме

Фон

Атрибуты CSS

Другие статьи

HTML DOM Style backgroundPosition Property

❮ Объект стиля

Пример

Изменить положение фонового изображения:

документ.body.style.backgroundPosition = «вверху справа»;

Попробуйте сами »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство backgroundPosition устанавливает или возвращает позицию фонового изображения. внутри элемента.
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
Имущество
фон Позиция 1.0 4,0 1,0 1,0 3,5
Синтаксис
Вернуть свойство backgroundPosition:
объект .style.backgroundPosition
Установить свойство backgroundPosition:
объект .style.backgroundPosition = значение
Значения свойств
Значение Описание
верхний левый
верхний центр
верхний правый
центральный левый
центральный центр
центральный правый
нижний левый
нижний центральный
нижний правый Если вы укажете только одно ключевое слово, другим значением будет «центр».
x% y% Значение x указывает положение по горизонтали, а значение y указывает положение по вертикали. Левый верхний угол — 0% 0%. Правый нижний угол — 100% 100%. Если вы укажете только одно значение, другое значение будет 50%.
xpos ypos Значение x указывает положение по горизонтали, а значение y указывает положение по вертикали. Верхний левый угол равен 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы CSS.Если вы укажете только одно значение, другое значение будет 50%. Вы можете смешивать% и единицы
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
наследовать Наследует это свойство от своего родительского элемента. Читать о унаследовать
Технические детали
Значение по умолчанию: 0% 0%
Возвращаемое значение: Строка, представляющая положение фонового изображения
Версия CSS CSS1
Другие примеры
Пример
Измените положение фонового изображения в элементе
по центру внизу:
документ.getElementById («myDiv»). style.backgroundPosition = «центр низа»;
Попробуйте сами »
Пример
Измените положение фонового изображения в элементе
на 200 пикселей по горизонтали и 40 пикселей по вертикали:
document.getElementById («myDiv»). style.backgroundPosition = «200px 40px»;
Попробуй сам »
Пример
Вернуть позицию фонового изображения в элементе
:
document.getElementById («myDiv»).style.backgroundPosition;
Попробуй сам »
Связанные страницы
Учебное пособие по CSS: фон CSS
Ссылка CSS: свойство background-image
Ссылка CSS: свойство background-position
Ссылка на HTML DOM: свойство фона
❮ Объект стиля
Как разместить текст на изображении с помощью HTML и CSS?
CSS position Свойство используется для установки позиции текста над изображением. Это можно сделать, заключив изображение и текст в «div» HTML.Затем сделайте положение div «относительным», а положение текста — «абсолютным». Абсолютные элементы располагаются относительно своего родителя (div). Свойства top, right, bottom и left этих элементов определяют их расположение относительно родительского элемента.
Пример 1:

< html >
000 000
000
000 000 9000 000000 9000 < стиль > .gfg { маржа: 3%; положение: относительное; } .first-txt { позиция: абсолютная; верх: 17 пикселей; слева: 50 пикселей; } .second-txt { позиция: абсолютная; снизу: 20 пикселей; слева: 10 пикселей; } стиль > голова > 000 000 < div класс = "gfg" > < img src .png « > < h4 класс = « first-txt » > Geeks5000 000 000 000 000 000 > < h4 класс = «второй текст» > A h4 > div > корпус > 0009000 000 000000
Выход:
Пример 2: 9 0006

< html >

< 000 0004 >
.gfg {
маржа: 3%;
положение: относительное;
}

.first-txt {
позиция: абсолютная;
верх: 17 пикселей;
слева: 20 пикселей;
}

.second-txt {
позиция: абсолютная;
верх: 17 пикселей;
слева: 150 пикселей;
}
стиль >
голова >
000 000 < div класс = "gfg" > < img src .png " > < h4 class = " first-txt " > Левый h4 > класс = "second-txt" > правый h4 > div > 9000 > html >
Вывод:

HTML является основой веб-сайтов и веб-приложений, используется для структурирования веб-страниц при разработке веб-приложений. .Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.
CSS - это основа веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.
Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с Web Design for Beginners | HTML курс.

Новая позиция фона в CSS3 (пример)
Всем привет.Я предполагаю, что большинство из вас использовали или имели опыт работы с background-position.
Введение
в background-position до css3 вы устанавливаете позицию от верхнего левого угла элемента.
Например:
div {background-position: 20px 40px; / * 20 пикселей слева и 20 пикселей сверху * /}
Проблема заключалась в том, что невозможно определить точное положение с другой точки, например снизу / справа, я могу начать только слева сверху!
Мы можем написать: background-position: right bottom; , и мы можем написать: положение фона: 70% / слева /80% / сверху / ;,
, но мы не можем написать 20 пикселей справа и 20 пикселей снизу.
Поздоровайтесь с новой
фоновой позицией
Чтобы решить эту проблему, CSS3 предоставляет нам возможность определить, с чего начать позиционирование, и тем самым определить, какой будет точка 0,0.
Как это работает?
Вместо записи только 2 значений (горизонтальная и вертикальная точка слева вверху), теперь мы можем с помощью css3 записать начало горизонтальной и вертикальной позиции, например, справа внизу + значение из начальной точки.
Создадим пример:
Сначала создайте пустой div с некоторыми стилями:
HTML

УСС
.box { ширина: 300 пикселей; высота: 300 пикселей; цвет фона: #ddd; отступ: 10 пикселей; граница: сплошная 3px # 333; радиус границы: 10 пикселей; }
Теперь мы добавим фоновое изображение с фиксированным размером фона (новая функция в CSS3).
.коробка{ фон: url (images / image.jpg) no-repeat; размер фона: 150 пикселей 150 пикселей; }
И, наконец, мы добавим New Background Position .
Сначала мы устанавливаем горизонтальную начальную точку, например: справа , а затем мы можем установить расстояние, которое мы хотим от этой позиции, например 20 пикселей.
Во-вторых, мы устанавливаем начальную точку по вертикали, например: внизу, и после того, как мы устанавливаем расстояние, которое мы хотим от этой позиции, например 40 пикселей.
** CSS новая позиция фона **
.box {background-position: right 20px bottom 40px;}
Вот что получим:
Живой пример
Ага! мы сделали это.
Вы также можете сделать коробку с несколькими фоновыми изображениями, и каждое изображение определять в другом углу, как в этом примере.
Поддержка
Работает во всех новых браузерах, кроме Safari.
IE - работает с IE9 и выше.
Chrome для мобильных устройств - не поддерживается - отчет пользователя
Вот и все, надеюсь, вам понравится.
Если вам понравился этот пост, я буду рад получить ваше UPVOTE. Приглашаем вас подписаться на меня или мою команду @Walla! НИОКР и подтверждаю мои навыки.
Элад Шехтер.
Div боксов (тегов) - положение абсолютное, относительное и фиксированное
Учебник Уикхема по HTML и CSS
Карта сайта | Главная | Поиск
Просмотр в Firefox, Safari, Opera и IE, но IE6 часто требует других решений.В целом IE7 и IE8 отображаются как Firefox, за исключением функций HTML5 и CSS3. Обновления IE9 и выше в основном связаны с проблемами HTML 5 и CSS3 и отображаются в значительной степени, как и другие основные браузеры. Google Chrome основан на том же движке WebKit, что и Safari.
Некоторые примеры приведены только для того, чтобы показать проблемы, другие показывают решения, которые работают в большинстве основных браузеров. Используйте подходящий вам пример.
предупреждение о проблемах: работает в некоторых ситуациях или некоторых браузерах или требует ухода, чтобы отображать как вы хотите ОК в Firefox, Safari, Opera, Google Chrome и IE
Пять свойств для позиции
В трех основных схемах позиционирования, описанных ниже, есть пять свойств положения: статическое, относительное, абсолютное, фиксированное и наследование.Для простоты эти три используются в следующих примерах: абсолютный, относительный и фиксированный. Позиционирование может применяться к любому элементу блока; следующие примеры сконцентрированы на использовании блоков div (тегов div), которые являются блочными элементами, и они, вероятно, наиболее часто используют позиции.
Положение: статическое; - это значение по умолчанию, при котором, если у него нет верхней, правой, нижней или левой позиции, элемент блока просто следует в порядке кода и начинает новую строку. Обычно не требуется указывать position: static, если вы не хотите отменить одно из других свойств.[Встроенные элементы будут на одной строке, если есть место и позиция не применяется].
Используйте View, Source или щелкните правой кнопкой мыши & Page Source в большинстве браузеров, чтобы увидеть код для следующих примеров.
Div с положением: абсолютное;
1 Серебряный родительский блок div - position: relative; так, чтобы он тек в нужной позиции в тексте страницы. Родительский элемент when position: relative формирует контейнер, из которого элементы div position: absolute занимают свои позиции. Если родительский элемент, содержащий div, не существует или не имеет position: relative; позиция: абсолютные блоки div будут отображаться в верхней части экрана, занимая свои позиции из контейнера главной страницы или тела всей страницы.
позиция: абсолютная; верх: 70 пикселей; слева: 255 пикселей; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель; (без высоты)
позиция: абсолютная; верх: 10 пикселей; слева: 3 пикселя; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель
позиция: абсолютная; верх: 25 пикселей; слева: 507 пикселей; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пикс
Код CSS в основной таблице стилей: -
div {padding: 3px; граница: сплошной черный 1px; }
.фон {цвет фона: # c0c0c0; отступ: 0; цвет: # 335500; }
Код разметки HTML: -

позиция: абсолютная; верх: 70 пикселей; слева: 255 пикселей; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель; (без высоты)

позиция: абсолютная; верх: 10 пикселей; слева: 3 пикселя; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель

позиция: абсолютная; верх: 25 пикселей; слева: 507 пикселей; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель

Новичку может быть проще построить всю страницу с помощью блоков position: absolute, потому что все они останутся там, где они размещены, и каждый из них может быть перемещен, не затрагивая другие.При изменении разрешения экрана все блоки div сохраняют свои позиции, и может потребоваться прокрутка. Однако по мере накопления опыта научитесь использовать position: relative для более плавного дизайна.
Порядок, в котором коды появляются в html-файле, не имеет значения, поскольку все блоки div занимают свои позиции из тела или основного контейнера, включающего все содержимое, и не соответствуют предыдущему коду. В приведенном выше примере блоки div были помещены в родительский контейнер и должны находиться внутри кода контейнера, но в любом порядке.Здесь необходим родительский контейнер, потому что приведенный выше текст может изменить положение на странице, если средство просмотра изменяет размер текста, поэтому родительскому div присваивается положение: относительно потока с текстом.
Сначала кодируется azure div, но это не имеет значения, если все три кодируются в родительском контейнере.
Позиция: абсолютные блоки div обычно позиционируются кодированием сверху, слева или справа и ширины. Высота не важна, если div должен разрешать расширение вниз, если выбран более крупный текст, но другие div должны быть расположены так, чтобы это позволяло.Вы также можете кодировать нижнюю часть вместо верхней, но это может повлиять на положение на экране, поскольку браузеры имеют разную высоту области просмотра.
Будьте осторожны, если вы используете div'ы position: absolute вместе с div, которые не являются position: absolute (или position: fixed), потому что div'ы position: absolute (или position: fixed) находятся за пределами нормального потока и не обращают внимания на какой-либо код за пределами их, что означает, что текст или изображение в div, которые не являются position: absolute (или position: fixed), не будут знать о них и перетекать над ними или позади них.
Эти div, если они не находятся в элементе position: relative, часто используются для логотипов сбоку страницы, где они не будут конфликтовать ни с чем другим, или они используются для содержания всего на странице, так что все divs имеют постоянное положение. и ни один из них не может двигаться в соответствии с тем, как код реагирует на разрешение окна, например, переход к строке ниже при более низком разрешении экрана.
Один из вариантов для новичка - применить принцип, использованный в моем примере, ко всей странице.Используйте div с position: relative в качестве содержащего div для всей страницы с margin: auto, чтобы он центрировался при высоких разрешениях экрана. Внутри содержащего div сделайте все div позициями: absolute, чтобы новичку было проще позиционировать. Содержащий блок div будет перемещаться вбок, поскольку он центрируется в разных разрешениях, но внутренние блоки position: absolute останутся на своих выделенных позициях. Однако по мере накопления опыта научитесь использовать position: relative для более плавного дизайна.
Типичная разметка HTML (исключая doctype, теги html и элементы раздела заголовка): -

поместите все содержимое div сюда

поместите все содержимое div сюда

поместите все содержимое div сюда

Это помогает временно использовать background-colors для div, чтобы увидеть размер и положение каждого div и удалить цвета позже.
Div с положением: относительное;
2 Div - это блочный элемент (см. Список других по ссылке). Если вы закодируете несколько блочных элементов, таких как div, с position: relative или без указания позиции, они будут отображаться один под другим. Элементы с position: relative или no position должны быть закодированы в разметке HTML в том порядке, в котором вы хотите, чтобы они обрабатывались (обычно это порядок, в котором вы хотите, чтобы они отображались на экране).
[Вот список встроенных элементов.Встроенные элементы обычно следуют друг за другом в одной строке, но это не относится к div, если вы не кодируете как display: inline-block; который заставляет блочный элемент вести себя как встроенный элемент или применять float, который по-прежнему оставляет элемент как блочный элемент, но позволяет ему плавать либо внутри другого содержимого, либо в той же строке, что и другой плавающий div. См. Пункт 3.]
Необычно указывать верхнее или нижнее, левое или правое положение с помощью position: relative; тем не менее, эти позиции могут использоваться для перемещения div относительно того места, где он обычно находится в нормальном потоке содержимого страницы, но при перемещении остается пространство, где бы div располагался, поэтому используйте эти позиции с осторожностью.
Текст в блочных элементах, таких как теги
...
, также можно перемещать относительно другого текста, например, немного вверх или вниз, влево или вправо. Позиции также используются для создания слоев, например, для перемещения текста относительно его нормального положения над предыдущим изображением.
Веселье начинается, когда вы используете поплавки и смешиваете их с не плавучими элементами блока. Верхняя и левая позиции ниже были опущены, а добавлено float: left. Нет необходимости использовать родительский контейнер, если div используют position: static или position: relative, потому что они будут течь в окружающем содержимом.
положение: относительное; плыть налево; ширина: 140 пикселей; высота: 70 пикселей; маржа справа: 3 пикселя;
Если плавающие блоки div используются с относительным позиционированием без указания верхнего и левого положения, каждый блок позиционируется относительно соседних блоков div или других элементов блока в html-файле. Инструкция float скажет ему двигаться относительно нормального относительного положения.
Без инструкции float: left в div слева не было бы текста, обтекающего его; весь этот текст в
...
теги будут начинаться ниже div, потому что они закодированы после div.
Приведенный выше пример будет плавать справа внутри текста, если было указано float: right и если div был помещен перед текстом в html-файле.
Если блоки div не имеют заявленной ширины или высоты или заданы проценты, с другим разрешением экрана или размером текста некоторые блоки изменят свой размер, создав плавный макет, и переместят следующие блоки, поэтому следует позаботиться о том, чтобы макет страницы не был нарушен.
3
положение: относительное; плыть налево; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель
положение: относительное; плыть налево; ширина: 240 пикселей; цвет фона: лазурный; общая ширина 248 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пиксель; (без высоты)
положение: относительное; плыть налево; ширина: 210 пикселей; высота: 125 пикселей; цвет фона: желтый; общая ширина 218 пикселей, включая отступ 2 * 3 пикселя и границу 2 * 1 пикс
ВАЖНО: этот абзац начинается с
, чтобы очистить поплавок (левый, правый или оба), чтобы он не начинался в доступном пространстве рядом с розовым div выше.Плавающие элементы не передают свою высоту родительскому контейнеру, поэтому необходимо очистить плавающие элементы, иначе следующий элемент окажется слишком высоко.
Все div с плавающей точкой должны быть закодированы в html-файле в том порядке, в котором они должны появляться. Float: left сообщает первому div, что он готов стать частью последовательности с плавающей запятой. Div без float обычно запускается с новой строки, а первый div с float в последовательности float обычно начинается с новой строки. Все div должны находиться в одной строке рядом друг с другом.Аналогичные правила применяются к float: right. Float: left и float: right можно использовать вместе, и обычно div'ы float: right кодируются последними.
Кажется, что то, плавает ли div рядом с предыдущим, контролируется предыдущим div с плавающей точкой или его отсутствием, и если div без float следует за div с плавающей точкой, IE6 и IE7 ведут себя иначе, чем IE8 и выше и Firefox, см. следующий пример.
Div можно сделать гибкими, используя процентные размеры, чтобы они всегда соответствовали разрешению экрана и не требовалась прокрутка.
Для получения дополнительных примеров плавающих div см. Макеты с двумя и тремя столбцами
4 У лазурного div нет float: left, но есть место рядом с розовым div, а у розового div есть float: left, поэтому лазурный div занимает пространство рядом с розовым div в IE6 и IE7, но в Firefox и IE8 и выше, лазурный div полностью покрывает розовый div, хотя текст находится под розовым div.
Примечание: если позиция: relative была опущена в лазурном div, она все равно будет ниже розового div в IE8 и выше и Firefox, но розовый div будет отображаться; см. пример 4a для макетов с двумя и тремя столбцами.
Однако у желтого div есть float: left, а у лазурного div нет, поэтому желтый div переворачивается как обычно и идет как можно дальше влево, что находится напротив нижней части розового div в IE6 и IE7, но в сторону крайний левый в IE8 и выше и Firefox.
положение: относительное; плыть налево; ширина: 240 пикселей; высота: 150 пикселей; цвет фона: розовый;
положение: относительное; ширина: 240 пикселей; цвет фона: лазурный; (без высоты и без поплавка)
положение: относительное; плыть налево; ширина: 210 пикселей; высота: 75 пикселей; цвет фона: желтый;
Див с положением: фиксированное;
5a Позиция: фиксированная не поддерживается IE6, но поддерживается IE7 и более поздними версиями, Firefox, Opera и Safari.
В указанных выше браузерах этот розовый div отображается в верхнем левом углу экрана, где он был расположен, и остается на том же месте при прокрутке. Стиль отображается внутри div. Однако IE6 не поддерживает position: fixed и показывает его в позиции после этого текста, где он был закодирован, и он будет прокручиваться.
Позиция 5а: - положение: фиксированное; верх: 70 пикселей; слева: 30 пикселей; ширина: 220 пикселей; высота: 40 пикселей;
Позиция: необходимо разместить фиксированный div с учетом предполагаемого размера области просмотра.Div с position: fixed; top: 700px никогда не будет отображаться на экране с разрешением 800 x 600, и при прокрутке он не появится.
Просмотрите эту страницу в IE7 и более поздних версиях, Firefox, Opera или Safari при разных разрешениях экрана и убедитесь, что div position: fixed pink будет отображаться в той же позиции на экране, но основное содержимое будет сдвигаться, поскольку оно центрировано с помощью поля: auto .
Пункт 5а: - позиция: фиксированная; верх: 70 пикселей; слева: 30 пикселей; ширина: 220 пикселей; высота: 40 пикселей;
Стили: -
# fixed1 {position: fixed; верх: 70 пикселей; слева: 30 пикселей; ширина: 220 пикселей; высота: 40 пикселей; цвет фона: розовый; }
5b Можно зафиксировать положение div от верхней части окна, но позволить ему центрироваться по горизонтали.Это полезно, если вы хотите, чтобы строка меню находилась в верхней части окна, но при этом она должна располагаться по центру при разных разрешениях окна. Требуются два div, и ниже показаны два метода кодирования. Разметка html одинакова для обоих, но я дал каждому другой идентификатор, чтобы показать оба метода. Поместите div в самый верх страницы (а не в пространство, как я) и задайте для div цвет фона, чтобы нижнее содержимое не отображалось при прокрутке.
Как и в предыдущем пункте, лазурные примеры отображаются в верхней части экрана в современных браузерах, где они были размещены, и остаются на том же месте при вертикальной прокрутке.IE6 не поддерживает позицию: фиксируется таким же образом и показывает их в том месте, где они были закодированы на странице, и они будут прокручиваться.
Метод 1 имеет содержащую позицию div: fixed, которая фиксируется по вертикали, но также фиксируется слева и справа от окна. Внутренний div имеет ширину и поле: auto по центру в пределах ширины окна position: fixed div: -

Позиция 5b (1): - Div с позицией: фиксированная

Стили: -
# fixedtop1 {position: fixed; верх: 5 пикселей; слева: 0; справа: 0; граница: нет; z-индекс: 50; }
# center250a {width: 250px; маржа: авто; цвет фона: # f0ffff; }
Метод 2 имеет содержащий div с шириной и полем: автоматически по центру.Внутренний div имеет position: fixed с той же шириной и заполняет пространство ширины содержащего div, но останется фиксированным по вертикали: -

Позиция 5b (2): - Div с позицией: фиксированная

Стили: -
# center250b {ширина: 250 пикселей; маржа: авто; граница: нет; }
# fixedtop2 {position: fixed; ширина: 250 пикселей; верх: 85 пикселей; цвет фона: # f0ffff; z-индекс: 50; }
Я поместил фактический код разметки после тега body, потому что div без position: fixed имеет высоту, которая оставляет пространство в содержимом страницы, если я помещаю его в другое место, но если вы используете этот код для меню вверху вы можете настроить верхнее поле следующего div по своему усмотрению.Центрирование двух методов немного отличается, потому что один учитывает поле тела страницы, а другой - нет.
Обычно
См. W3.org параграф 9.8 для подробного сравнения нормального потока (полученного с положением: относительное или не указанное положение) и положением: абсолютным. Вы запутаетесь, читая это, поэтому поэкспериментируйте с простым примером.
w3.org в параграфе 9.3 говорится: -
В CSS2 блок может быть размещен по трем схемам позиционирования:
1.Нормальный расход. В CSS2 нормальный поток включает в себя форматирование блоков блоков, встроенное форматирование встроенных блоков, относительное позиционирование блоков или встроенных блоков, а также расположение компактных блоков и блоков ввода.
2. Плавает. В модели с поплавком ящик сначала выкладывается в соответствии с нормальным потоком, затем вынимается из потока и смещается влево или вправо, насколько это возможно. Контент может течь по бокам поплавка.
3. Абсолютное позиционирование. В модели абсолютного позиционирования блок полностью удаляется из нормального потока (он не влияет на последующих братьев и сестер) и ему назначается позиция по отношению к содержащему блоку.
Следует проявлять осторожность с текстом в полях div. Некоторые из приведенных выше блоков div недостаточно велики для текста наибольшего размера, и отображение отличается в IE6 и Firefox, но обычно означает, что либо div расширяется вниз по нижнему тексту (IE6), либо текст расширяется за пределы div (Firefox и IE7 и выше).
Div, разработанным с процентным размером, можно дать десятые доли процента, но в результате будет на 1 пиксель выше или ниже точного вычисления. Например, для разрешения экрана 800 пикселей, что дает чистую ширину около 780 пикселей, 25.1% составляет 195,78 пикселей, что приведет к 195 или 196 пикселей в зависимости от других расчетов содержимого.
В идеале блоки div должны быть спроектированы без высоты, чтобы они были гибкими по высоте, если средство просмотра установило в браузере больший текст. Однако Firefox дает div без определенной высоты высоту, равную нулю, и это означает, что это влияет на цвета фона или изображения (см. Различия фона Firefox / IE). В таких случаях лучше всего задать для div фиксированную высоту.
См. W3.Коробочная модель org здесь.
Помните, что когда Doctype включается в заголовок перед тегом html (как и должно быть), тогда общая ширина div равна его определенной ширине плюс границы, поля и ширина отступов. В некоторых старых руководствах, включая «CSS с нуля» (см. Мою страницу «Ссылки»), говорится, что Internet Explorer помещает отступы и границы внутри блока div. Так было с очень ранними версиями IE и все еще так с IE6 до IE9, если Doctype не используется (но вы должны его использовать).
6 Это показывает, как IE совпадает с Firefox при использовании Doctype. Заполнение и границы рассчитываются нестандартно. Изображение имеет ширину 200 пикселей, а размер div: 200 пикселей, но общая ширина больше.
Этот div имеет тот же размер, что и изображение ниже: 200 x 50 пикселей с отступом: 20 пикселей;
Этот div имеет тот же размер, что и изображение выше: 200 x 50 пикселей с границами: 20 пикселей;
См. Раздел «Отступы и границы без Doctype», чтобы увидеть разницу между IE6 и IE9 и Firefox, когда Doctype не используется.IE10 отображается так же, как Firefox и большинство других браузеров.
Если вы хотите, чтобы div составлял часть текста, вы не можете поместить div в тег p, тег p должен быть заменен на div.
Первая часть текста в div
текст или содержимое среднего div
остатка текста в другом div.
Код для вышеуказанного: -

Первая часть текста в div & nbsp;

текст или содержимое среднего div

& nbsp; остаток текста в другом div.
& nbsp; просто создает «жесткое» пространство, другими словами, гарантирует, что пространство создается в тех местах, где код иногда не предоставляет пробел.
Если вы хотите получить внешний вид блока div, создав цветную рамку с текстом в ней, альтернативой использованию трех блоков будет следующая: -
Первая часть текста или содержимое средней части остатка текста.
Код для вышеуказанного: -
Первая часть текста текст или содержимое средней части остаток текста.
Его преимущество заключается в том, что текст до и после «блока» не содержится в разделах div, что может вызвать проблемы с отображением при более низких разрешениях экрана, поскольку они могут переворачиваться вниз, оставляя место, где текст обычно продолжался бы в той же строке.
Золотые правила
Вот несколько золотых правил, но из-за сложности позиционирования есть много исключений: -
Позиция: абсолютная; если вы поместите все на странице в блочный элемент (например, div) с position: absolute, каждый будет иметь свое место, не мешая другим.
Должность: относительная; часто нет необходимости указывать это, но необходимо указать, если внутри него находятся элементы div position: absolute и требуется, чтобы они брали свою позицию из него. Чтобы найти правильную комбинацию положения, часто требуется определенное количество проб и ошибок: указанное относительное или не указанное, а также указанное или не указанное с плавающей точкой. Поплавки необходимы для отображения элементов блока рядом.
Не использовать bottom: 0; или любое другое число, чтобы закрепить блоки в нижней части экрана или связанные с ним.Если вы это сделаете, а затем используете меньшее разрешение экрана, вы обнаружите, что другой контент также хочет достичь дна и будет закрыт div, закрепленным внизу. Прокрутка не заставит его появиться.
Это ненадежно в IE6, но блоки position: fixed для нижнего колонтитула работают в IE7 и выше и Firefox, как показано в нижнем колонтитуле, привязанном к нижней части экрана. Будьте осторожны, если сделаете это.
Банкноты
Просмотр / Исходный код или Просмотр / Исходный код страницы в меню браузера, чтобы увидеть весь HTML-код.
Тело этой страницы имеет поля: 20 пикселей. Большинство блоков div имеют border: 1px solid #black и padding: 3px, закодированные в таблице стилей tutorial.css.
Примеры выше находятся в содержащем div с шириной: 730 пикселей; и маржа: авто; так что они централизованы при больших разрешениях экрана.
В моих примерах много кодов было помещено в теги html, а не в таблицу стилей или стиль в голове. Я сделал это для удобства зрителя, чтобы большинство (но не все) коды находились в одном месте, и таблицу стилей не всегда нужно было просматривать дополнительно.При кодировании вашей собственной страницы вы должны попытаться поместить как можно больше в таблицу стилей и связать с идентификатором или классом тег html.
Помните, что когда Doctype включен над заголовком перед тегом html (как и должно быть), тогда общая ширина div равна его определенной ширине плюс границы, поля и ширина отступов.
Если есть различия между Firefox и IE6, которые нельзя преодолеть с помощью одного кода, сначала запишите код, чтобы получить удовлетворительное решение в Firefox, а затем создайте стиль IF, который будет применяться только к IE6: -
например, если margin-top: 20px; в Firefox должно быть margin-top: 30px; в IE6 введите в заголовок страницы html / xhtml следующее: -

или, если есть много разных стилей, создайте отдельную таблицу стилей: -

IE6 будет содержать только измененные стили, такие как div {margin-top: 30px; } и другие (без тегов head, body или Doctype).
При просмотре исходной страницы этого сайта вы можете увидеть код вида & lt; p> Маленькая цапля & lt; / p> вместо
Маленькая цапля
. Код & lt; потому что в этом случае код должен отображаться на экране в виде текста. Если бы в код был помещен символ <, браузер активировал бы код, и он не отображался бы в виде текста.Такой код обычно не требуется при написании тегов HTML-кода, которые необходимо активировать.
© Wickham, 2006 г. обновлено 2013 г.
верх | Карта сайта | предыдущая | следующий
.
No related posts.

Значение	Описание
верхний левый верхний центр верхний правый центральный левый центральный центр центральный правый нижний левый нижний центральный нижний правый	Если вы укажете только одно ключевое слово, другим значением будет «центр».
x% y%	Значение x указывает положение по горизонтали, а значение y указывает положение по вертикали. Левый верхний угол — 0% 0%. Правый нижний угол — 100% 100%. Если вы укажете только одно значение, другое значение будет 50%.
xpos ypos	Значение x указывает положение по горизонтали, а значение y указывает положение по вертикали. Верхний левый угол равен 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы CSS.Если вы укажете только одно значение, другое значение будет 50%. Вы можете смешивать% и единицы
начальный	Устанавливает для этого свойства значение по умолчанию. Читать про начальный
наследовать	Наследует это свойство от своего родительского элемента. Читать о унаследовать

Значение по умолчанию:	0% 0%
Возвращаемое значение:	Строка, представляющая положение фонового изображения
Версия CSS	CSS1

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

Значения background-position

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

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

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

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

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

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

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

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

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

Значения background-position

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

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

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

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

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

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

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

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

seodon.ru | CSS справочник — background-position

Тип свойства

Значения

Синтаксис

Версии CSS

Браузеры

перевод на русский, синонимы, антонимы, произношение, примеры предложений, транскрипция, значение, словосочетания

Html div background image — Вэб-шпаргалка для интернет предпринимателей!

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

background-color

background-image

background-repeat

background-attachment

background-position

gradient

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

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

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

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

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

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

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

Свойства фона 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

Способ 2

Способ 3

Рекомендуем к прочтению

background-position — CSS: Каскадные таблицы стилей

Значения

Что касается процентов:

Позиционирование фоновых изображений

HTML

CSS

Результат

background-position-x — CSS: Cascading Style Sheets

Значения

Базовый пример

HTML

CSS

Результат

background-position · Документы WebPlatform

Резюме

Обзорная таблица

Синтаксис

Значения

Примеры

Использование

Связанные спецификации

См. Также

Статьи по теме