Текст поверх изображения CSS

Question

У меня возникают проблемы с некоторым кодом CSS/HTML.

http://codepen.io/anon/pen/bgHGn

У меня есть фон страницы в DIV (функционально вд) это, чтобы заполнить всю страницу. Содержимое затем прокручивается снизу, но это не имеет значения.

У меня возникли проблемы с попыткой отобразить большой заголовок посередине страницы (независимо от разрешения/размера окна) и придерживаться фона, чтобы при прокрутке пользователя содержимое покрывало его?

Я не уверен, что это имеет смысл или даже возможно.

Спасибо!

Answer 1

Смотрите код CSS для решения:

http://codepen.io/anon/pen/GqeBa

.largeheader { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    height: 100px; 
    width: 250px; 
    margin: -50px 0 0 -112px; 
    font-size: 100px; 
    z-index: 2; 
} 

Фиксированное позиционирование позволяет элементу оставаться на месте во время прокрутки страницы.

Answer 2

вы хотите установить выравнивания текста свойства к центру

.largeheader{ 
    position: fixed; 
    margin: 0 auto; 
    font-size: 100px; 
    z-index:2; 
    text-align: center; 
    top: 50%; 
    left: 50%; 
} 

основная проблема быть это не совсем в центре страницы, чтобы @RCorrie поставил в своем ответе, вы можете сделать задать ширину и высоту набора для div, а затем исправить границу с помощью простой математики. Теперь, если вы хотите перейти на использование javascript и jQuery, это целая другая игра в мяч, и вы можете сделать это с минимальной работой, и вам не придется менять размер и размер div для каждой созданной веб-страницы.

Answer 3

Чтобы получить большой заголовок по горизонтали, вы можете использовать text-align: center; в качестве предложенного @metsales.

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

Вы будете в конечном итоге с чем-то вроде этого:

.largeheader { 
    line-height: 40px; 

    position: absolute; 
    top: 50%; 
    margin-top: -20px; 
    left: 0px; 
} 

Чтобы поместить заголовок позади другого содержимого, когда пользователь прокручивает вы хотите, чтобы играть с его имуществом z-index. Я ничего не могу предложить, потому что я не знаю остальной части вашей разметки, но вы, вероятно, захотите получить отрицательное значение, а MDN имеет достойный article.