Как изменить положение картинки в css

Расположение картинок

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

gallery-preview < display: block; position: relative; width: 310px; height: 310px; >img < position: absolute; transition: 1s; height: 100%; width: 100%; margin: 0 auto; left: 0; right: 0; >img:nth-child(1) < z-index: 3; height: 100%; width: 100%; top: 0%: >img:nth-child(2) < z-index: 2; height 90%; width: 90%; top: 10%; >img:nth-child(3) < z-index: 1; height 80%; width: 80%; top: 20%; >img:hover

Далее, существует свойство css3 transform: translateZ() , transform: scale() , а также прочие трансформации, посредством которых можно сделать код ещё проще — избежав необходимости что-либо центрировать и менять размер (перспективу) уже вообще одним числом.

И самое правильное решение — вложить картинки в контейнеры рекурсивно (можно скриптом):

Тогда, селектора потребуется всего два: .cs > img < . >и .cs > .cs <. >, и CSS-правила получаются относительные.

Размер CSS изображения, как заполнить, а не растянуть?

У меня есть изображение, и я хочу установить его конкретную ширину и высоту (в пикселях) Но если я задаю ширину и высоту с помощью css ( width:150px; height:100px ), изображение будет растянуто, и оно может быть уродливым. Как Заполнить изображения до определенного размера с помощью CSS и не растягивать? Пример заполнения и растяжения изображения: Исходное изображение: Растянутое изображение: Заполненное изображение: Обратите внимание, что в примере с заполненным изображением выше: сначала размер изображения изменяется до 150×255 (поддерживаемый формат изображения), а затем обрезается до 150×100.

Mahdi Ghiasi 01 авг. 2012, в 10:38
Поделиться
Попробуйте просто установить width и height должны соответственно отрегулировать
NewInTheBusiness 01 авг. 2012, в 10:45
Растягивает изображение. увидеть это: jsfiddle.net/D7E3E
Mahdi Ghiasi 01 авг. 2012, в 10:47
Требуется часть изображения без изменения размера!
Ali Ben Messaoud 01 авг. 2012, в 10:50

Извините, неправильно понял. Думал, что ты хочешь откорректировать оригинальную фотографию и сохранить ее в растянутом состоянии

NewInTheBusiness 01 авг. 2012, в 10:52

Крис Койер также имеет несколько хороших решений для этого: css-tricks.com/perfect-full-page-background-image

ambiguousmouse 30 янв. 2013, в 18:17

Это очень важно, чтобы правильно обрезать оставшиеся важные части изображения! Неужели вы это из центра изображений?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS

#container < width: 300px; height: 300px; >img

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

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

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

CSS

#container < width: 300px; height: 300px; >img

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

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

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

 
 
PDF 
 

Добавляем тень, используя 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 – Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих
Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования

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

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

top — фоновый рисунок прилеплен к верхней стороне элемента;
center — фоновый рисунок расположен в центре оси 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). Пример:
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Важно: фоновые изображения и печать
Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег .
Поддержка браузерами
Запись 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.
В ряде случаев веб-мастера при создании сайтов или верстке веб-страниц и шаблонов сталкиваются с ситуацией, когда необходимо точно поместить картинку в нужном месте страницы так, чтобы совместить ее с изображением заднего фона. К примеру, мы имеем рисунок дизайна главной страницы сайта и на этом рисунке есть такой фрагмент:
Фрагмент рисунка дизайна страницы.
Нам нужно «разрезать» этот рисунок на отдельные картинки и сделать его точную копию на странице создаваемого сайта. Внимательно присмотревшись к фрагменту дизайна, мы видим, что:

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

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

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

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

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

Вот как это все будет выглядеть:
Совмещенные картинки фона и логотипа.
Все прекрасно и замечательно — картинка точно попадает туда, где ей и положено быть, что нам и требуется.
Используя этот способ, для точного позиционирования картинки нужно всего лишь изменить значения padding-left (отступ картинки слева) и padding-top (отступ картинки сверху).
Теперь несколько важных замечаний:

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

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

Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу ). Использование тега является наиболее предпочтительными способом размещения изображений на страницах.
Предназначение указанных css свойств, применяемых к изображениям различное: от создания тени до увеличения резкости. Они помогают нам лучше контролировать положение и внешний вид изображений, добавляемых с помощью тега .
Давайте рассмотрим каждый из них подробнее.
Усиление резкости изображений с image-rendering
Поддержка браузерами — 90,82% (на 11.2017)
При масштабировании изображения браузер сглаживает его, чтобы оно не выглядело пиксельным, но в зависимости от разрешения изображения и экрана, результат не всегда получается приемлемым. Вы можете контролировать поведение браузера при сглаживании изображения с помощью свойства image-rendering.
Это широко поддерживаемое свойство контролирует алгоритм, применяемый браузером при масштабировании. Оно имеет 2 значения: crisp-edges и pixelated.
Значение crisp-edges удерживает цветовой контраст между пикселями. Другими словами, никакого сглаживания не производится, что отлично подходит для создания контраста.
Когда используется pixelated, соседние пиксели определенного пикселя объединиться с ним, создавая впечатление, будто они образуют один большой пиксель, отличный для экранов с высоким разрешением.
Если вы внимательно посмотрите на края цветов на gif-изображении, представленном ниже, вы сможете увидеть разницу между изображениями: обычным и с примененным CSS-свойством image-rendering: pixelated.
Растягивание изображений с помощью object-fit
Поддержка браузерами — 89,7% (на 11.2017)
Значения contain, cover, fill похожи на аналогичные значения свойства background-size, которое указывает как фоновое изображение заполняет какой-либо элемент. Свойство object-fit очень похоже на упомянутое выше свойство background-size, так как оно также определяет размер изображения внутри его контейнера. Значение contain масштабирует изображение внутри контейнера. Cover делает тоже самое, но если соотношение сторон изображения и контейнера не совпадают, изображение обрезается. Fill заставляет изображение растягиваться и заполнять его контейнер. scale-down уменьшает изображение чтобы оно поместилось внутри контейнера.
 
  
Сдвиги изображений с помощью object-position
 
Поддержка браузерами — 89,7% (на 11.2017)
Аналогично дополняющему background-position свойству background-size, существует свойство object-position, которое дополняет object-fit. Свойство object-position позволяет сдвинуть изображение внутри его контейнера. Координаты можно указывать в абсолютных и относительных величинах, использовать ключевые слова или комбинировать различные значения (top 20px right 5px, center right 80px).
HTML
 
  
Выравнивание изображений с помощью vertical-align
Иногда мы добавляем тег (который по своей природе является строчным элементом) внутрь текста в качестве иллюстраций или для украшения. В таких случаях выравнивание изображений и текста в необходимом нам положении может стать сложной задачей, если вы не знаете какое свойство применить.
Свойство vertical-align применяется не только в ячейках таблиц. Оно также может выравнивать строчные элементы, родителями которых также являются строчные элементы, поэтому с его помощью мы можем выровнять изображение внутри строки текста. У этого свойства имеется довольно много значений, которые можно применить к строчным элементам, поэтому вам будет из чего выбрать.
HTML
 
 
PDF 
 

Добавляем тень, используя 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 пикселей для элемента :
       
По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент полностью заполнился фоновым изображением.
Желательно всегда устанавливать цвет заднего фона в качестве альтернативы изображению, в этом случае, если изображение по каким-то причинам не будет загружено, то будет использован заданный Вами цвет. Запомните этот момент, мы не будем к нему возвращаться в статьях этого учебника.
Результат нашего примера:
Рис. 115 Пример установки изображения в качестве фона.
Управление повтором фонового изображения
Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.
Это свойство имеет следующие доступные значения:


Значение
Описание


repeat
Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.


repeat-x
Фоновое изображение будет повторяться по горизонтали (по оси x).


repeat-y
Фоновое изображение будет повторяться по вертикали (по оси y).


no-repeat
Фоновое изображение не будет повторяться.


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


Рассмотрим пример использования этого свойства:
      
left top
 
left center
 
left bottom
 
right top
 
right center
 
right bottom
 
center top
 
center center
 
center bottom
 
20px 75%
   
В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.
Результат нашего примера:
Рис. 117 Пример позиционирования фонового изображения.
Фиксированный задний фон
Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами CSS вы можете изменить такое поведение заднего фона, например, зафиксировав его.
Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.
       
В данном примере для всех элементов мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.
Результат нашего примера:
Рис. 118 Пример фиксированного фонового изображения.
Свойства CSS 3 для работы с фоновыми изображениями
Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.
И первое CSS свойство, которое мы рассмотрим — background-origin, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.
Возможные значения этого свойства:


Значение
Описание


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


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


content-box
Фоновое изображение позиционируется от верхнего левого угла содержимого элемента.


Рассмотрим применение этого свойства:
      
padding-box
 
border-box
 
content-box
   
В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства 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 (внутренние отступы), то это пространство не будет окрашено).


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

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

Результат нашего примера:
Рис. 120 Пример использования свойства background-clip.
Как вы могли заметить свойства background-origin и background-clip, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.
На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.
Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:


Значение
Описание


auto
Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.


length
Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto.


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


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


contain
Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.


Рассмотрим применение этого свойства:
      
auto
 
100px 100px
 
70% 70%
 
cover
 
contain
   
В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:

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

Результат нашего примера:
Рис. 121 Пример масштабирования фоновых изображений.
Универсальное свойство background
Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.
Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.
Свойство background имеет следующий синтаксис:
background: "color image position/size repeat origin clip attachment;
Где значения соответствуют вышерассмотренным нами свойствам:
Давайте рассмотрим пример использования универсального свойства background:
       
И так, что мы сделали в этом примере:

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

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

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


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

© 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

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

 


2. Block (также сюда отнесем float) элементы. Наиболее применяемый практически. Варианты выравнивания:
— обтекание текстом (float, padding, margin)

— просто блочное позиционирование (display)

3. Абсолютное позиционирование. Объект отображается вне основного потока информации, попросту — располагается над/под элементами (тегами) родительского RELATIVE позиционированного контейнера (тег body является таким по-умолчанию).

 
 

* помним о совместимостях
* ну и конечно лучше всего выносить 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
Описание
Задает положение фонового изображения внутри элемента по горизонтали. Свойство background-position-x является нестандартным и не входит в спецификацию CSS.
Синтаксис
background-position-x: left | center | right | |
Значения
left Выравнивает фон по левому краю. Эквивалент записи 0 или 0%. center Выравнивает фон по центру горизонтали. Эквивалент записи 50%. right Выравнивает фон по правому краю. Эквивалент записи 100%. проценты Задает положение фона в процентах от ширины элемента. Значение 0% или 0 выравнивает левый край фонового изображения по левому краю элемента. Значение 100% выравнивает правый край рисунка по правому краю элемента. значение Задает положение фона в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. относительно левого края элемента.
       
.
  
Результат данного примера показан на рис. 1.
Рис. 1. Положение фона, заданное в процентах
Читать:
Itunes где находится в айфоне