Запуск фонового изображения под панелью навигации в Twitter Bootstrap

Относительный новичок в CSS/bootstrap.

Я потратил некоторое время, пытаясь получить фоновое изображение для интеграции с Twitter Bootstrap, используя первый метод на этой странице CSS Tricks . В итоге я использовал «тело» в качестве тега CSS, потому что HTML просто… не работал. Хотя в целом все работает нормально, изображение начинается «за» верхней панелью навигации, а затем расширяется вниз, поэтому верх скрывается за черной панелью навигации

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

Я также пытался создать уникальный класс для фонового изображения (backgroundimage )и поместить div непосредственно внутри тега body и закрыть div прямо перед закрывающим тегом html, но еще раз, его настройка настраивает все содержимое страницы, а не только фоновое изображение.

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

body { 
    background: url(../images/height-chart500w.png) repeat-y fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 15%;
}

Учитывая свойства изменения размера фонового изображения -, хакерское решение просто изменить само изображение, чтобы создать пробел вверху, очевидно, не сработает. Как мне CSS это фоновое изображение -ниже панели навигации?

5
задан JeanSibelius 10 July 2012 в 12:49
поделиться