Повторение вопроса о фоновом изображении CSS

Question

Я пытаюсь заставить фоновое изображение повторять x и y внизу страницы.

Элемент шаблона фонового изображения

#pattern {    
    height: 3000px;
    width: 1000px;
    background:url(../images/patterns/pattern1.jpg) repeat;
    }

В html он находится внутри

#wrapper {    
    position: relative;    
    width: 1000px;    
    margin: 0 auto;    
    text-align: left;    
    }

Высота на #pattern установлена ​​равной 3000 пикселей, поэтому она будет отображаться, иначе изображение не появится.

Я пробовал разные вещи, такие как:

height: 100%;
min-height: 100%;
overflow: hidden;
overflow: auto;

Я бы хотел, чтобы фоновое изображение повторялось до нижней части #wrapper, до нижней части страницы.

Веб-страница здесь:

Большое спасибо.

Answer 1

Тег div , содержащий шаблон # pattern , должен начинаться с первой строки после тега body и закрываться в конце страницы непосредственно перед закрытие тега body .

Кстати, удалить атрибуты height и width или установить значение 100% , чтобы оно повторялось по всей странице.

Answer 2

Ваши внутренние элементы div абсолютно расположены, поэтому они не могут влиять на высоту контейнера #wrapper, в который вы хотите поместить код фонового изображения.

Кроме того, я не уверен, что это преднамеренно, но #pattern не переносит ваш контент, поэтому его высота должна быть установлена ​​вручную, так как у него нет дочерних элементов.

Есть два подхода, которые вы можете использовать. Используйте Javascript, чтобы определить общую высоту ваших абсолютно расположенных элементов div и установить высоту шаблона на это число.

Или вы можете использовать float, чтобы расположить столбцы, и поставить

в конце, чтобы родительский контейнер был таким высоким.

Answer 3

Ваш HTML неверен. #Pattern div должен содержать остальную часть страницы. Вы хотите, чтобы это росло с содержанием.

Answer 4

Примечание: повтор - это свойство по умолчанию для фонового изображения, поэтому не нужно объявлять.

Answer 5

Попробуйте дать #pattern значение position:fixed;, чтобы не важно, сколько контента вы должны прокручивать, оно не будет прокручиваться само по себе.

Answer 6

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