2014-10-24 2 views
0

У меня есть веб-страницу, где я использовалHTML, фоновое изображение не может повторить за счет высоты: настройка

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

для того, чтобы заполнить остальную часть экрана, когда мое содержание не 100% У достаточно материала, чтобы выйти за пределы дна.

Поскольку тело/HTML элементы имеют размеры в зависимости от видового экрана, когда я DO иметь достаточное содержание прокрутки, мое фоновое изображение отсекает, несмотря на то, что должно быть поведение фона повторения по умолчанию х/у.

body { 
    color: rgb(51, 51, 51); 
    background-image: url('../img/stardust3.png'); 
} 

HTML,/теги тела сохраняют свои 100% размеры высоты, но 100% видового экрана меньше, чем документ, в котором у вас есть для прокрутки. В конечном счете, мои теги html/body застревают вверху.

Перед этим я использовал javascript для захвата размера документа и постоянно менял размеры элементов при изменении размера экрана. Должен ли я вернуться к этому?

спасибо!

+2

скрипку поможет - на основании вашего примера я ставлю это вместе: http://jsfiddle.net/8pbtg9r8/1/ - Однако это не тиражирование проблему вы имеете. – remixdesign

+0

Кроме того, вам не хватает точки с запятой после 100% – remixdesign

+0

Да, отсутствует полуточка. В моем фактическом коде не было случая, но я обновился, если кто-то еще прочтет это. Спасибо. – looch

ответ

3

Если вы только устанавливаете height: 100%, чтобы увеличить фоновое изображение в нижней части страницы, не делайте этого. Фоны на элементе <html> всегда будут заполнять область просмотра независимо от содержимого. Кроме того, нет встроенного поля в элементе html. Вместо этого используйте:

html { background-image: url(../img/stardust3.png); } 
body { margin: 0; padding: 0; } 
+0

Это сделало трюк. Я переместил изображение из моего тела css в html css. Я использовал высоту: 100% по другим причинам, и это исправление позволило мне сохранить эту настройку. Спасибо. – looch

0

Попробуйте один из них:

body{ 
    background-attachment: fixed; 
} 

это сделает ваш фон не прокручивать с остальной частью страницы.

html, body{ 
    min-height: 100%; 
} 

это сделает ваш HTML, тело расти с содержанием и заполнить экран, если содержание < 100%.

Смежные вопросы