Fixed position background: CSS background-position property

 .background_image{
    положение: фиксированное; <-----Зачем это нужно и почему статика не работает?
    background: #000 url(../Images/Image.jpg) center center;
    ширина: 100%;
    высота: 100%;
    минимальная высота: 100%;
    размер фона: обложка;
    переполнение: скрыто;
}
 

 <тело>
    <дел>
    

• html
• background
• position

Это происходит потому, что height: 100% работает в position: fixed . Когда вы удаляете эту позицию, она не принимает эту высоту . Итак, есть еще один способ сделать это. Вы можете использовать vh единиц. Удалите позицию fixed и добавьте этот фон css :

 .background_image{
  высота: 100вх;
  background: #000 url(../Images/Image.jpg) center center;
  ширина: 100%;
  минимальная высота: 100%;
  размер фона: обложка;
  переполнение: скрыто;
  }
 

2

Средний html, поэтому страница должна соответствовать правилу HTML 5

ИЗ MDN CSS документ

Свойство CSS position выбирает альтернативные правила для позиционирования элементы, предназначенные для использования в сценарных анимационных эффектах.

Значения

статический

Это ключевое слово позволяет элементу использовать обычное поведение, т.е. размещается в своем текущем положении в потоке. Сверху, справа, снизу, свойства left и z-index не применяются.

родственник

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

абсолютный

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

фиксированный

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

Вы должны использовать свойство background-attachment с изображениями.

background-attachment может иметь одно из двух значений. background-attachment: фиксированный|прокрутка;

свойство position используется для позиционирования html-элементов, таких как div, p и т. д. Таким образом, вы не можете использовать его с изображениями.

Вам будет полезна эта ссылка

http://www.w3schools.com/cssref/pr_background-attachment.asp

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Опубликовать как гость

Электронная почта

Обязательно, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Фоновое изображение, фиксированное положение и iOS

Есть несколько (непонятных?) причин, по которым Apple не включила фиксированное положение фоновых изображений в свою мобильную операционную систему iOS. Это происходит, если у вас есть iPad или iPhone, например.

Что происходит?

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

В чем проблема?

Исправлено или нет, это не большая проблема, верно? Проблема может возникнуть, если вы хотите применить размер обложки к своему изображению, то есть к фону вашего тела или другой большой области. Пояснения:

• тело - это целая страница вашего сайта, она имеет большую высоту
• установка изображения как фиксированного заставит его оставаться на том же месте в вашем окне/экране
• , указывающий размер обложки, заставит ваше изображение занимать всю область, чтобы заполнить все пространство, чтобы не было пустого места.
  • все устройства, кроме iOs: изображение зафиксировано, размер обложки будет ограничен размером вашего экрана, и изображение будет правильно его закрывать
  • iOs: он не принимает фиксированное положение, тогда ваше изображение будет охватывать всю область, заданную тегом html (ваше тело или что-то еще, что вы выбрали). Изображение будет растянуто на все это место, оно будет полностью увеличено и искажено. Это ужасно

Какое решение?

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

Пример кода CSS:

 #wrapper { 
     background: url('../images/my_image.jpg') center center no-repeat fix; 
     background-size: обложка; 
 }     

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

Чтобы устранить проблему на iOS, вы можете добавить этот код

 @supports (-webkit-touch-callout: none) { 
 #wrapper { 
     background: url('.