Наложение фонового изображения CSS

Question

Мне было интересно. Как мне сделать это, когда вы просматриваете страницу на веб-сайте, за ней следует фоновый вид. Пример здесь: https://alexcican.com/post/455k-users/. Я хочу, чтобы что-то вроде самой верхней части страницы, может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Станьте знакомыми с позициями (относительными, абсолютными и фиксированными). Тем не менее, это основной элемент, который также запускает другие свойства, о которых вам нужно знать. Например, вы теряете ширину и высоту, когда выполняете какое-либо жесткое позиционирование, такое как фиксированное. Таким образом, элементы, указанные ниже, должны быть исправлены для этой высоты. Чтобы правильно сделать это без каких-либо сбоев, рассмотрите margin-top до 100% содержимого. Это компенсирует жесткое позиционирование. Другими вещами, которые вы должны учитывать при работе с жестким позиционированием, являются ваши z-индексы. Поскольку фиксированное позиционирование будет позиционировать элемент поверх вашего документа. Чтобы он скрывался, вы должны снести его на один или два слоя (при необходимости).

Выполните следующие действия:

<div class="wrapper-parallax"> 
    <div class="parallax"> 
    <h1>Header</h1> 
    </div> 

    <section class="content"> 
    <h1>Content</h1> 
    </section> 
</div> 

CSS:

body { 
    padding: 0; 
    margin: 0; 
} 

.parallax { 
    width: 100%; 
    height: 450px; 
    background: url(http://all4desktop.com/data_images/original/4238051-background.jpg) center center fixed; 
    background-size: cover; 
    top: 0; 
    position: fixed; 
    z-index: -1; 
} 

.content { 
    height: 100%; 
    min-height: 1000px; 
    background: #ededed; 
    position: relative; 
} 

.wrapper-parallax { 
    margin-top: 100%; 
} 

h1 { 
    margin: 50px auto; 
    text-transform: uppercase; 
    text-align: center; 
    font-family: Helvetica; 
    font-size: 150px; 
    color: #9A1414; 
} 

.content h1 { 
    line-height: 500px; 
    color: #999; 
} 

Смотрите это работает here