Фоновое изображение за пределами раздела-оболочки, в нижней части страницы

#html #css

#HTML #css

Вопрос:

Мне нужно разместить горизонтальное фоновое изображение внизу страницы. То, что у меня есть, работает нормально, при условии, что «оболочка» div заполнена большим количеством контента, и появляется полоса прокрутки пользователя.

Проблема возникает на некоторых страницах с небольшим содержанием, а раздел-оболочка короткая, мне нужно сохранить изображение внизу.

Вот неисправная страница на практике http://www.rmcl-usa.com /

Изображение дерева просто должно быть внизу. Опять же, это не проблема, когда div-оболочка расширяет разрешение пользователей.

Заранее благодарю вас.

Ответ №1:

Установите следующий CSS для вашего нижнего колонтитула div:

 position: absolute;
bottom: 0;
right: 0;
left: 0;
  

Убедитесь, что оно объявлено перед другими вашими разделами, таким образом, чтобы оно было наименьшим в z-индексе.

Комментарии:

1. Я не могу заставить это реализовать правильно. Когда вы говорите «нижний колонтитул», вы имеете в виду div фонового изображения? Это решение в основном заставляет короткий div расширяться до самого низа независимо от объема содержимого? Извинения

2. Когда я говорю «нижний колонтитул», я имею в виду любой div, который оборачивает изображение нижнего колонтитула. Я говорю это, потому что мы все знаем, что вы использовали правильный стиль и заключили свой нижний колонтитул в div. Кроме того, нет, это ничего не растягивает. Это «перемещает» ваш div на дно. Оно сохранит любую высоту, которую вы для него установили, но будет растягиваться по ширине в стороны страницы.

Ответ №2:

Переместите нижнее изображение div в правый нижний угол перед закрытием основного текста и выполните:

 <div id="bottomimage" style="position:absolute;bottom:0;right:0;left:0;z-index:-10;position:fixed;">
  

делая просто:

 position: absolute;bottom: 0;right: 0;left: 0;
  

в Firefox это не делалось для меня.