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

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

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

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

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

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

источник

2010-03-10 Pablo

Вслед за ответом Грэма:

«высота» в IE6 действует как «мин-высота» через другие браузеры.

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

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

Rich

источник

2010-03-10 12:42:11 kim3er

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

источник

2010-03-10 12:33:25 oezi

Спасибо за ответ. Я понимаю, что это не поддерживается IE6, что, к сожалению, является жестким требованием в моем случае. – Pablo

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

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

источник

2010-03-10 12:34:20

Спасибо за ответ. К сожалению, IE6 является жестким требованием в моем случае. – Pablo

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

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

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

Также путем добавления минимальной высоты: 100%; ко всем правилам css решит все ваши проблемы для любого браузера класса.

источник

2010-03-10 12:42:04

вы можете либо дать height к #content ид

или

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

источник

2010-03-10 12:45:01 pixeltocode

lol, вы избили меня :) – Alex

thanx для этого :) – pixeltocode

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

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

вместо того, где это момент на #content

источник

2010-03-10 12:54:13 Alex

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

ответ

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