Положение картинки css – Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих

Содержание

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

Точное позиционирование картинки на веб-странице

There are no translations available.

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


Фрагмент рисунка дизайна страницы.

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

  1. Задний фон состоит из повторяющегося фрагмента, поэтому его можно вырезать отдельно и сделать фоном тега div или td.
  2. Логотип имеет сзади полупозрачную, плавно исчезающую тень, поэтому его нельзя вырезать ровно по краю, а придется захватить часть заднего фона.

В результате мы получим две картинки:

Картинка 1.
Задний фон.
Картинка 2.
Логотип с частью заднего фона.

Теперь нам необходимо поместить их на страницу сайта и совместить с точностью до пикселя. Есть масса способов как это сделать:

  1. Сделать таблицу и порезав ее на ячейки, пытаться совместить края картинки 2 с фоном;
  2. С помощью однопиксельного прозрачного gif файла можно отодвинуть картинку 2 вниз и вправо;
  3. Вместо прозрачного gif файла можно использовать поля образованные с помощью тега div;
  4. И так далее...

Можно придумать довольно много вариантов реализации подобной задачи, но я хочу предложить вам самый, на мой взгляд, простой и эффективный способ точного позиционирования картинки внутри какого-либо тега. Он заключается в прописывании внутри тега img стиля, в котором мы задаем смещение картинки сверху и слева. Html код картинки будет выглядеть вот так:

<img src="http://artwebmaster.ru/images/stories/content/logo.gif" border="0"/>

Фоновое изображение пустим, к примеру, по тегу div, хотя можно и по tr - это кому как нравиться. В результате получаем:

<div align="left"> <img src="http://artwebmaster.ru/images/stories/content/logo.gif" border="0"/></div>

Вот как это все будет выглядеть:

Совмещенные картинки фона и логотипа.

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

Используя этот способ, для точного позиционирования картинки нужно всего лишь изменить значения padding-left (отступ картинки слева) и padding-top (отступ картинки сверху).

Теперь несколько важных замечаний:
  1. Следует иметь ввиду, что тег, внутри которого будет помещена картинка, должен, либо иметь жестко заданную высоту и ширину (с помощью width и height), либо картинка должна быть «прилеплена» к верхней и левой стороне тега (в теге td это делается с помощью valign и align). В идеале лучше сделать и то и другое.
    Если этого не делать, то картинка может «съезжать» со своего места в зависимости от окружающих тегов, окружающего текста и картинок. Вы, возможно, видели такие сайты, у которых при переходе от страницы к странице графика начинает «разъезжаться».
  2. В примере, описанном выше, стили помещены внутри тегов. Это совсем не обязательно и сделано лишь для наглядности. В принципе, их можно вынести в отдельный CSS файл таблицы стилей.

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

Желаю Вам удачи и успехов в веб-программировании!

===============================
© 2007 Соловьев И. В.


5 CSS свойств для изображений, которые вам необходимо знать

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

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

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

Давайте рассмотрим каждый из них подробнее.

Усиление резкости изображений с image-rendering

Поддержка браузерами - 90,82% (на 11.2017)

При масштабировании изображения браузер сглаживает его, чтобы оно не выглядело пиксельным, но в зависимости от разрешения изображения и экрана, результат не всегда получается приемлемым. Вы можете контролировать поведение браузера при сглаживании изображения с помощью свойства image-rendering.

Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.

Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.

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

Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.

CSS


img {
  image-rendering: pixelated;
}

Растягивание изображений с помощью object-fit

Поддержка браузерами - 89,7% (на 11.2017)

Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.

HTML


<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Сдвиги изображений с помощью object-position

Поддержка браузерами - 89,7% (на 11.2017)

Аналогично дополняющему background-position свойству background-size, существует свойство object-position, которое дополняет object-fit. Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения (top 20px right 5px, center right 80px).

HTML


<div>
  <img src="/rose.png' alt="rose flower'>
</div>

CSS


#container {
  width: 300px;
  height: 300px;
}
img {
  width: 100%;
  height: 100%;
  object-position: 150px 0;
}

Выравнивание изображений с помощью vertical-align

Иногда мы добавляем тег <img /> (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.

Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.

HTML


<p>
PDF <img src="/pdf.png"
style="vertical-align:text-top" alt="Image">
</p>

Добавляем тень, используя filter: drop-shadow()

Тени, применяемые к тексту и блочным элементам, могут сделать ваши страницы более привлекательными. То же самое относится и к изображениям. Значения, которые передаются filter: drop-shadow() очень похожи на значения CSS-свойств для создания тени (text-shadow, box-shadow). Первые 2 указывают вертикальный и горизонтальный отступ тени от изображения, третий и четвёртый – степень размытия и радиус распространения тени, а последнее, пятое значение – цвет тени.

Как text-shadow и drop-shadow тень добавляется к объектам, к которым применяется этот фильтр. При использовании filter: drop-shadow() к изображениям во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.

Оригинал статьи - http://www.hongkiat.com/blog/img-css-properties/

Перевод: Матвей Земсков

Учебник CSS 3. Статья "Работа с фоном элемента в CSS"

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

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

Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.

В настоящее время браузеры работают с тремя графическими форматами:

  • GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
  • JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
  • PNG (англ. Portable network graphics — растровый формат хранения графической информации).

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

селектор {
background-image: url(images/main_bg.png);
}

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


Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента <body>:

<!DOCTYPE html>
<html>
<head>
	<title>Пример установки изображения в качестве фона</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-color: white; /* задаем задний фон для элемента */
}
</style>
</head>
	<body>
	</body>
</html>

По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент <body> полностью заполнился фоновым изображением.


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


Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

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

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

Это свойство имеет следующие доступные значения:

ЗначениеОписание
repeatФоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-xФоновое изображение будет повторяться по горизонтали (по оси x).
repeat-yФоновое изображение будет повторяться по вертикали (по оси y).
no-repeatФоновое изображение не будет повторяться.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример управления повтором фонового изображения</title>
<style> 
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
.noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться.   */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
	<body>
		<h2>Значение repeat для body (по умолчанию)</h2>
		<div class = "noRepeat">no-repeat</div>
		<div class = "repeatX">repeat-x</div>
		<div class = "repeatY">repeat-y</div>
	</body>
</html>

По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства 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%. Вы можете совместно использовать проценты и единицы измерения.

Рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример позиционирования фонового изображения</title>
<style> 
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("smile_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /**/
width: 100px; /* устанавливаем ширину элемента */
height: 100px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin: 10px; /* устанавливаем внешние отступы со всех сторон */
text-align: center; /* выравниваем текст по центру */
line-height: 60px; /* указываем высоту строки */
background-color: azure; /* задаем цвет заднего фона */
}
.leftTop {background-position: left top;} /* задаем позицию ключевыми словами */
.leftCenter {background-position: left center;} /* задаем позицию ключевыми словами */
.leftBottom {background-position: left bottom;} /* задаем позицию ключевыми словами */
.rightTop {background-position: right top;} /* задаем позицию ключевыми словами */
.rightCenter {background-position: right center;} /* задаем позицию ключевыми словами */
.rightBottom {background-position: right bottom;} /* задаем позицию ключевыми словами */
.centerTop {background-position: center top;} /* задаем позицию ключевыми словами */
.centerCenter {background-position: center center;} /* задаем позицию ключевыми словами */
.centerBottom {background-position: center bottom;} /* задаем позицию ключевыми словами */
.userPosition {background-position: 20px 75%;} /* задаем позицию по горизонтали в пикселях, а по вертикали в процентах */
</style>
</head>
	<body>
		<div class = "leftTop">left top</div>
		<div class = "leftCenter">left center</div>
		<div class = "leftBottom">left bottom</div>
		<div class = "rightTop">right top</div>
		<div class = "rightCenter">right center</div>
		<div class = "rightBottom">right bottom</div>
		<div class = "centerTop">center top</div>
		<div class = "centerCenter">center center</div>
		<div class = "centerBottom">center bottom</div>
		<div class = "userPosition">20px 75%</div>
	</body>
</html>

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

Результат нашего примера:

Рис. 117 Пример позиционирования фонового изображения.

Фиксированный задний фон

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

Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать "параллакс" эффект.

<!DOCTYPE html>
<html>
<head>
	<title>Пример фиксированного фонового изображения</title>
<style> 
div {
height: 600px; /* устанавливаем высоту элемента */
}
.primerFixed {
background-image: url('nich.jpg'); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-attachment: fixed; /* указываем, что задний фон будет зафиксирован */
background-position: center; /* центрируем задний фон */
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
</style>
</head>
<body>
	<div></div>
	<div class = "primerFixed"></div>
	<div></div>
</body>
</html>

В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта "параллакс" откройте пример в отдельном окне браузера и прокрутите страницу вниз.

Результат нашего примера:

Рис. 118 Пример фиксированного фонового изображения.

Свойства CSS 3 для работы с фоновыми изображениями

Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.

И первое CSS свойство, которое мы рассмотрим - background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.

Возможные значения этого свойства:

ЗначениеОписание
padding-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
border-boxФоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента).
content-boxФоновое изображение позиционируется от верхнего левого угла содержимого элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-origin</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 10em; /* устанавливаем высоту элемента */
border: 5px dashed orange; /* устанавливает пунктирную границу размером 5px оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
color: yellow; /* устанавливаем цвет шрифта желтый */
}
.test {background-origin: padding-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон) */
.test2 {background-origin: border-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента) */
.test3 {background-origin: content-box;}  /* устанавливаем, что фоновое изображение позиционируется от верхнего левого угла содержимого элемента */
</style>
</head>
<body>
	<div class = "test">padding-box</div>
	<div class = "test2">border-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:

  • Первый блок (padding-box) - фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
  • Второй блок (border-box) - фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
  • Третий блок (content-box) - фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).

Результат нашего примера:

Рис. 119 Пример использования свойства background-origin.

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

У Вас может возникнуть вопрос: - А в чем собственно заключается разница между свойством background-origin и background-clip?


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


В таблице представлены возможные значения этого свойства:

ЗначениеОписание
border-boxФон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию.
padding-boxФон элемента занимает все пространство (не включая границ элемента).
content-boxФон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено).

Давайте рассмотрим следующий пример:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-clip</title>
<style> 
div {
width: 10em; /* устанавливаем ширину элемента */
height: 9em; /* устанавливаем высоту элемента */
background-image: url(medved.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
border: 5px dashed yellow; /* устанавливает пунктирную границу размером 5px черного цвета */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 10px; /* устанавливаем величину внешнего отступа от правого края элемента */
padding: 15px; /* устанавливаем величину внутреннего отступа для всех сторон элемента */
}
.test {background-clip: border-box;}  /* устанавливаем, что фон элемента занимает все пространство (включая границы элемента) */
.test2 {background-clip: padding-box;}  /* устанавливаем, что фон элемента занимает все пространство (не включая границы элемента) */
.test3 {background-clip: content-box;}  /* устанавливаем, что фон элемента занимает все содержимое элемента */
</style>
</head>
<body>
	<div class = "test">border-box</div>
	<div class = "test2">padding-box</div>
	<div class = "test3">content-box</div>
</body>
</html>

В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:

  • Первый блок (padding-box) - фон элемента занимает все пространство. Это значение по умолчанию.
  • Второй блок (border-box) - фон элемента занимает все пространство (не включая границы элемента).
  • Третий блок (content-box) - фон элемента занимает все содержимое элемента.

Результат нашего примера:

Рис. 120 Пример использования свойства background-clip.

Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

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

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

ЗначениеОписание
autoФоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
lengthУстанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
%Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.
coverМасштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
containМасштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

<!DOCTYPE html>
<html>
<head>
	<title>Пример масштабирования фоновых изображений</title>
<style> 
div {
width: 8em; /* устанавливаем ширину элемента */
height: 8em; /* устанавливаем высоту элемента */
border: 3px solid orange; /* устанваливаем сплошную границу размером 3 пикселя оранжевого цвета */
background-image: url(manul.jpg); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
background-repeat: no-repeat; /* указываем, что фоновое изображение не будет повторяться */
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
margin-right: 15px; /* устанавливаем внешний отступ с правой стороны */	
margin-bottom: 15px; /* устанавливаем внешний отступ с нижней стороны */	
color: yellow; /* устанавливаем цвет элемента */
}
.test {background-size: auto;} /* фоновое изображение содержит свою ширину и высоту */
.test2 {background-size: 100px 100px;} /* устанавливаем ширину и высоту фонового изображения в пикселях */
.test3 {background-size: 70% 70%;} /* устанавливаем ширину и высоту фонового изображения в процентах от родительского элемента */
.test4 {background-size: cover;} /* масштабируем фоновое изображение под размеры элемента */
.test5 {background-size: contain;} /* масштабируем фоновое изображение, чтобы оно целиком поместилось внутри элемента */
</style>
</head>
	<body>
		<div class = "test">auto</div>
		<div class = "test2">100px 100px</div>
		<div class = "test3">70% 70%</div><br>
		<div class = "test4">cover</div>
		<div class = "test5">contain</div>
	</body>
</html>

В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

  • Первый блок (auto) - фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
  • Второй блок (100px 100px) - первое значение устанавливает ширину, второе значение задает высоту в пикселях.
  • Третий блок (70% 70%) - первое значение устанавливает ширину, второе значение задает высоту в процентах.
  • Четвертый блок (cover) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
  • Пятый блок (contain) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время - без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

background: "color image position/size repeat origin clip attachment;

Где значения соответствуют вышерассмотренным нами свойствам:

Давайте рассмотрим пример использования универсального свойства background:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
html, body {
height: 100%; /* устанавливаем высоту элементов */
width: 100%; /* устанавливаем ширину элементов */
margin: 0; /* убираем внешние отступы элемента */
padding: 0; /* убираем внутренние отступы элемента */
}
header {
width: 100%; /* устанавливаем ширину элемента */
min-height: 34%; /* устанавливаем минимальную высоту элемента */
background: white url('cat_g.jpg') bottom/cover no-repeat; /* указываем цвет заднего фона, фоновое изображение, позицию/масштабируем под размеры элемента, фон не повторяется */
}
.primer2 {
width: 100%; /* устанавливаем ширину элемента */
min-height: 66%; /* устанавливаем минимальную высоту элемента */
background: url('lis.png') top/contain no-repeat, url('cat_g.jpg') bottom/cover no-repeat; 
/* Обратите внимание, что значения для различных изображений указываются через запятую */
/* Путь к изображению 1 позиция/масштаб повтор, Путь к изображению 2  позиция/масштаб повтор */
}
</style>
</head>
	<body>
		<header></header>
		<div class = "primer2"></div>
	</body>
</html>

И так, что мы сделали в этом примере:

  • Мы установили для элементов <html> и <body> высоту 100%, убрали внутренние и внешние отступы.
  • Для элемента <header> задали минимальную высоту равную 34% от родительского элемента, ширину установили 100%. В качестве заднего фона установили изображение - url('cat_g.jpg'), позиционировали его по низу и масштабировали фоновое изображение под размеры элемента (center / contain - background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет.
  • Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100%. В качестве заднего фона установили два различных изображения, позиционировали их по центру (center) и масштабировали их (первое изображение полностью помещается - значение contain, второе изображение масштабируется под размеры элемента cover ).

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

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


Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:

  • Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):

    Практическое задание № 28.

    Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.

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


© 2016-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]

Основы позиционирования фона в CSS

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

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

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

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

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

CSS box model

Элемент в CSS имеет три области: border box, padding box и content box. Border box включает в себя область внутри границы элемента и площадь под самой границей.

Padding box — это область, включающая в себя внутреннюю область элемента и область, задаваемую свойством padding, но не включает границы.

Content box — это внутренная область элемента, не включающая область отбивки и границы.

Есть еще четвертая область, называемая margin box, которая включает в себя элемент и внешнюю область, задаваемую свойством margin.

Когда вы задаете фон элемента — будь то изображение или цвет — фон заполняет область padding box. (Такое поведение может быть изменено с помощью свойства background-origin, мы еще к нему вернемся).

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

Система координат элемента

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

HTML-элементы имеет систему координат в CSS. SVG-элементы, напротив, не имеют похожей системы координат, поскольку не основываются на блочной модели.

Начало системы координат в CSS расположено в верхнем левом углу элемента.

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

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

Это означает, что когда вы применяете фоновое изображение к элементу, браузер расположит первую копию, а затем повторяющиеся элементы, начиная с верхнего левого угла padding box.

Например, предположим, что у вас есть фоновое изображение, примененное к элементу, и вы не установите повтор фонового изображения (только один экземпляр этого изображения будет применен). Начальное положение фонового изображения будет находиться в начале координат системы координат padding box. Т.е., верхний левый угол изображения будет расположен в верхнем левом углу padding box. (См. пример ниже).

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

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

Изменение области позиционирования фона и системы координат с помощью свойства background-origin

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

Оно может принимать три значения: padding-box (значение по умолчанию), content-box и border-box.

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

Пример наглядно показывает разницу между различными значениями background-origin.

Для каждой области позиционирования фона, определенной с помощью background-origin, система координат «сдвигается» в угол этой области.

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

Для простоты, мы не будем изменять область позиционирования фона по умолчанию в статье. Таким образом, во всех примерах фоновое изображение будет позиционироваться относительно padding box.

Позиционирование фонового изображения с помощью background-position

Мы видели в предыдущем разделе, что фоновое изображение позиционируется по умолчанию в левом верхнем углу области позиционирования. Это связано с тем, что значение свойство background-position по умолчанию имеет значение 0%, 0%.

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

В дополнение к абсолютным и относительным значениям, есть также пять ключевых слов, которые можно использовать: top, right, bottom, left и center.

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


background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

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


background-position: 10% 50%; /* 10% of the width to the right, and 50% down from the top */
background-position: top; /* equivalent to `top center` */
background-position: 50px; /* equivalent to `50px center` */

Вы можете смешивать и сочетать значения, комбинируя числовые значения с процентами и/или ключевыми словами. Следует обратить внимание, что может использоваться пара ключевых слов или комбинация ключевое слово — процентное/числовое значение, но пара процентное/числовое — ключевое слово некорректна. Так center left — это корректное значение, а 50% left — нет. Но значение left 50% корректно. Первое значение соответствует горизонтальному смещению, а второе — вертикальному.

На самом деле, ключевые слова — это сокращения для конкретных процентных значений. А именно: top эквивалентно смещению 0% от верхней границы, bottom эквивалентно смещению 100% от верхней границы, left эквивалентно смещению 0% от левой границы, right эквивалентно смещению 100% от левой границы и center эквивалентно смещению 50% в любом направлении (по вертикали или по горизонтали).

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

Как работают абсолютные значения

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

Лучший способ объяснить и понять — это визуализировать, поэтому ниже приведены два примера абсолютного позиционирования фонового изображения и то, как они интерпретируются браузером. В обоих примерах элемент имеет размер 100×80px.

Позиционирование фонового изображения с использованием абсолютных значений

Абсолютные значения могут быть отрицательными, в этом случае фоновое изображение будет смещено за границу элемента.

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

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

Как работают процентные значения

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

К примеру, значение 0% 0% смещает точку 0% 0% изображения в точку 0% 0% области позиционирования фона. Значение 50% 70% сдвигает точку, расположенную на 50% ширины изображения правее левой границы и на 70% высоты ниже верхней границы в точку 50% 70% области позиционирования фона.

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

Позиционирование фонового изображения с помощью процентных значений

Так же, как и в случае с абсолютными значениями, вы можете указывать отрицательные процентные значения, при этом фоновое изображение будет смещено в противоположную сторону. Так, значение −10% −30% сдвинет изображение на 10% влево отновительно левого края и на 30% вверх.

Поиграться с процентными значениями можно в примере .

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

Смещение относительно любой границы

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

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

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

Рассмотрим следующие примеры такого синтаксиса:


background-position: top 1em right 3em; /* positions the background image 1em down the top edge and 3em left of the right edge */

background-position: right 1em bottom 1em; /* positions the background image 1em above the bottom edge and 1em to the left of the right edge */

background-position: left 20px bottom 50px;

Если указаны только три значения из четырех — четвертое считается равным нулю.

Кое-что следует иметь в виду при использовании синтаксиса с четырьмя значенями: если указано три или четыре значения, то каждому числовому или процентному смещению должно предшествовать ключевое слово, которое определяет, относительно какой грани задано смещение. Например, background-position: bottom 10px right 20px означает смещение 10px вверх относительно нижней грани и 20px влево относительно правой грани. Если заданы три значения, смещение считается равным нулю. Если заданы два числовых значения и ключевое слово, такая позиция считается невалидной, а браузер использует значение по умолчанию 0% 0%.

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

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

Размер, повторение, обрезка и многое другое!

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

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

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

Я надеюсь, статья была полезной. Спасибо за чтение.

как задать положение рисунка

Задание положения рисунка может быть трех видов (собственно как и любого другого объекта на странице). Ссылаюсь на w3schools по css (html аттрибуты игнор - так как понимаю нужно средствами css). Ссылки внизу поста.

1. Inline. По умолчанию картинка является inline элементом, то есть простым языком отображается в общем потоке информации без переноса на новую строку. Обычно удобно при использовании маленьких картинок-иконок в тексте. Тут можно использовать:
- вертикальное выравнивание (vertical-align)
- padding
- margin

<img src="images/img.png" alt="" />
- Если все же нам надо на новой строке, тогде надо сделать перенос строки при помощи BR тега или использовать блочное позиционирование.
- Если нужно отцентровать изображение, надо заключиьт картинку в тег для которого задано центрование текста, например:

<center><img src="images/img.png" alt="" /></center>

<p><img src="images/img.png" alt="" /></p>

2. Block (также сюда отнесем float) элементы. Наиболее применяемый практически. Варианты выравнивания:
- обтекание текстом (float, padding, margin)
<img src="images/img.png" alt="" />
- просто блочное позиционирование (display)
<img src="images/img.png" alt="" />
3. Абсолютное позиционирование. Объект отображается вне основного потока информации, попросту - располагается над/под элементами (тегами) родительского RELATIVE позиционированного контейнера (тег body является таким по-умолчанию).

<img src="images/img.png" alt="" />
<img src="images/img.png" alt="" />
--------------

* помним о совместимостях
* ну и конечно лучше всего выносить css в отдельный файл и испольовать классы.

--------------

ссылки на свойства
- vertical-align
- margin
- padding
- float
- display
- position и positioning

background-position-x | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
7.0 8.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию 0
Наследуется Нет
Процентная запись Да
Применяется Ко всем элементам

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

background-position-x: left | center | right | <проценты> | <значение>

Значения

left
Выравнивает фон по левому краю. Эквивалент записи 0 или 0%.
center
Выравнивает фон по центру горизонтали. Эквивалент записи 50%.
right
Выравнивает фон по правому краю. Эквивалент записи 100%.
проценты
Задает положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента.
значение
Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно левого края элемента.

Пример

HTML5CSS2.1CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>background-position-x</title>
  <style>
   body {
    background: #66806E url(images/clover.png) repeat-y;
    background-position-x: 95%; /* Положение фона */
   }
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Положение фона, заданное в процентах

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

[window.]document.getElementById("elementID").style.backgroundPositionX

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

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