html — Как сделать положение фона фиксированным и центрированным?
Задавать вопрос
спросил
Изменено
9 лет, 3 месяца назад
Просмотрено
27 тысяч раз
Мой сайт настроен на «разделы страниц» для вертикальной прокрутки. первый раздел страницы имеет 100% ширину и высоту, как и другие разделы, но имеет фоновое изображение, которое прокручивается и растягивается до ширины браузера. Я пытаюсь сохранить это, а также установить фиксированное положение. поэтому он остается неподвижным, а содержимое ниже прокручивается вверх и НАД фоновым изображением.
Итак, мой вопрос заключается в том, как добавить свойство fixed к свойству background-position:center center;
/* div с фоновым изображением */
<дел>
/* остальное содержимое я хочу прокручивать вверх и вниз */
<дел>
<дел>
#основной{
ширина: 100%;
высота: 100%;
фон: url('../images/bg10.jpg') без повтора;
background-attachment: исправлено;
фоновая позиция: по центру по центру;
размер фона: обложка;
}
Это мое предложение, это то, что я использовал, и это работает для меня.
0
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.
Как я могу создать фоновое видео с фиксированным вложением. Помоги пожалуйста! — Как
tgary719
(Томас) 1
Привет! Я пытаюсь понять, как я могу сделать фон видео неподвижным, как вы можете сделать с изображениями. Я пробовал тонны CSS и продолжаю терпеть неудачу.
Видео, которое я хочу сделать фиксированным фоновым видео, расположено на главной странице сайта в самом верху. https://milehighexchangors.com/
Чтобы упростить CSS, я присвоил строке, содержащей видео, класс my-row. Я чувствую, что это должен быть простой CSS, такой как у меня ниже, однако он не работает. Пожалуйста помоги!
#my-row.fl-row-bg-video .fl-row-content {
background-attachment: исправлено;
}
Спасибо!
тгари719
(Томас) 2
Я знаю, что есть некоторые CSS-свисты, что это торт для смеха
janet4now
(Джанет Л. Армстронг) 3
Я сейчас не вижу там видео, но если вы хотите сделать полный фон видео:
Таким образом, за словами « ПРИСОЕДИНЯЙТЕСЬ К САМОЙ УДИВИТЕЛЬНОЙ ГРУППЕ R / E EXCHANGE В КОЛОРАДО » в самом верху https://milehighexchangors. com/ сразу под заголовком воспроизводится видеофон.
Еще раз спасибо за любую помощь. Я думаю, что часть, вызывающая проблемы, может быть связана с исправлением div и видео. Хотя не уверен.
Спасибо за любую помощь!
janet4now
(Джанет Л. Армстронг) 5
Вы должны использовать position:fixed, чтобы div оставался на месте.
тгари719
(Томас) 6
Еще раз привет!
Итак, каждый раз, когда я устанавливаю блок div в фиксированное положение, он подтягивает блоки под ним, как показано на этом снимке экрана. Даже когда я устанавливаю div под его положением в фиксированное положение, он все равно всплывает.
Еще раз спасибо за вашу помощь!
janet4now
(Джанет Л. Армстронг) 7
С фиксированной позицией он не занимает места, поэтому вам придется добавить отступ к продолжающимся элементам, чтобы они правильно складывались с самого начала. Я считаю, что тогда они будут перекрываться при прокрутке. Этого ты хотел?
тгари719
(Томас) 8
Хорошо! Ты потрясающийгггг! Совсем забыл добавить поля. Последняя проблема, с которой у меня возникла проблема, — это z-индекс этих двух элементов div. Я хочу, чтобы нижний div (my-roww) закрывал верхний div (my-row) при прокрутке, тогда как в настоящее время верхний div (my-row) закрывает вторичный при прокрутке.
Я установил второе погружение на 999 и он до сих пор не работает. Я также попытался установить для первого погружения отрицательное значение, но тогда это был просто белый div.
Вот мой Css на данный момент:
#my-row{
position:fixed;
ширина: 100%;
z-индекс: 1 !важно;
}
#my-roww{ z-index: 999 !важно; }
Еще раз спасибо за помощь!
тгари719
(Томас) 9
Хорошо, я солгал. Я исправил эту часть, потому что вторичный div также не был зафиксирован. Нееет, проблема у меня в том, что нижний колонтитул не прикреплен. Я уверен, что это потому, что обычно он позиционируется относительно в теме, а остальные фиксированы, как легко это исправить? тгари719
(Томас)
страница-раздел {
ширина:100%;
поле: 0px авто 0px авто;
переполнение-х: скрыто;
}
.home-bg {
высота:100%;
background:url('img/home-bg.jpg') без повторов;
background-position:center center;
-webkit-background-size: обложка;
-moz-background-size: обложка;
-o-размер фона: обложка;
размер фона: обложка;
z-индекс: 1;
}
com/ сразу под заголовком воспроизводится видеофон.
