Фоновое изображение длиннее, чем окружающий div

Question

На веб-сайте клиента я должен добавить фоновое изображение только для отдельной области страницы (ее реальной части содержимого).

Проблема в том, что если содержимое достаточно короткое, изображение будет обрезано. Как можно сделать изображение полностью видимым? Я пытался добавить атрибут CSS «overflow», но, к сожалению, он мне не помог.

Вот пример веб-сайта, над которым я должен работать: http://www.sfp -pensioen.nl / werknemer / welkom Фоновое изображение на элементе div с id = "content".

По конкретной ссылке, которую я отправляю, это не проблема, потому что контент достаточно длинный, но если вы удалите элементы с помощью firebug, проблема станет очевидной.

ps: IE6 должен поддерживаться.

Answer 1

вы могли бы либо дать height идентификатору #content

или

применить background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; к #mainContent вместо # content

Answer 2

Исходя из ответа Грэма:

«высота» в ie6 действует как «минимальная высота» в других браузерах.

min-height: 50px;
_height: 50px;

В приведенном выше примере минимальная высота кросс-браузера составляет 50 пикселей. ie6 будет читать «_height» там, где другие браузеры не будут. Если вы не взламываете, используйте условный оператор.

Rich

Answer 3

Атрибут overflow управляет тем, что происходит с div, когда содержимое слишком велико, чтобы уместиться - если у вас есть div фиксированного размера с некоторым содержимым, которое может переполниться, вы обычно хотите auto вариант. overflow не влияет на фоновое изображение.

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

Answer 4

overflow для background-image s невозможно, но вы можете установить min-height для content (или установить изображение в другое div с меньшим z-index и расположить его абсолютно, чтобы оно появилось на месте Вы хотите - но это очень плохое решение)

Answer 5

Если вы знаете, что #sidebar или #main всегда будут иметь визуальную высоту, равную или большую, чем фоновое изображение, тогда вы можете просто добавить фоновое изображение к:

.sub #wrapper #mainContent {
background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll 0 150px transparent;
}

вместо того, где находится момент на #content

Answer 6

То, что вы хотите, это 100% высоты, которую вы можете достичь с помощью следующего.

html {
    height: 100%;
}
body {
    height: 100%;
}
#content {
    height: 100%;
}

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

Также, добавив min-height: 100%; все правила CSS решат все ваши проблемы для любого браузера класса.