Position background fixed: 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 не применяются.

родственник

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

абсолютный

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

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

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

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

0

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

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

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

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

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

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

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

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

Зарегистрируйтесь, используя электронную почту и пароль

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

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

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

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

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

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

CSS фоновое вложение | Могу ли я использовать.

Могу ли я использовать

?

Фоновое вложение CSS

• Глобальное использование

  79,44% + 3,75% "=" 83,19%

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

Chrome

1. 4 - 110: Supported
2. 111: Supported
3. 112 - 114: Supported

Edge

1. 12 - 110: Supported
2. 111: Supported

Safari

1. 01% - Partial support"> 3.1 - 4 : Частичная поддержка
2. 5 - 12.1: Поддерживается
3. 13 - 13,1: Частичная поддержка
4. 14 - 15,3: не поддерживается
5. 15,4 - 16,3: Поддержано
6. 16,4: Поддержано
7. 16,5 - TP: поддержан

4134 - Partfox

Opera

1. 9 - 10,1: частичная поддержка
2. 10,5 - 94: Поддержка
3. 954 4.........0145
4. 5,5 - 8: Частичная поддержка
5. 9 - 10: Поддерживается
6. 11: Поддерживается

Хром для Android

1. 111: Поддержка

SAFARI на IOS

SAFARI на IOS

NOS

на IOS

ON IOS

на IOS

на IOS

. - 12.5: частичная поддержка

Samsung Internet

1. 15% - Not supported"> 4: не поддерживается: частичная поддержка

Opera Mini

1. Все: не поддерживается

Opera Mobile

1. 10: частичная поддержка
2. 11-110145
3. 10: частичная поддержка
4. 11-11.134
5. 10: частичная поддержка
6. 11-11.134
7. 10: частичная поддержка
8. .
   1. 13.4: поддерживается

   Браузер Android

   1. 2.

      No related posts.