imagem de fundo é maior do que a div anexando

Question

Em um site do cliente, eu tenho que adicionar uma imagem de fundo por apenas uma região contida da página (o seu verdadeiro parte de conteúdo).

O problema é que, se o conteúdo é curto o suficiente, então a imagem será cortada. Como seria possível ter a imagem totalmente visível? Eu tentei adicionar o "estouro" atributo CSS, mas infelizmente isso não me ajudar.

Aqui está um exemplo do site eu tenho que trabalhar em: http: // www. sfp-pensioen.nl/werknemer/welkom a imagem de fundo é no elemento div com id = "content".

No link específico que estou enviando não é um problema, porque o conteúdo é longo o suficiente, mas se você remover elementos usando o Firebug, então o problema vai se tornar óbvio.

ps:. IE6 deve ser suportado

Answer 1

Na sequência da resposta de Graham:

"altura" no IE6 age como "min-height" em outros browsers.

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

O exemplo acima irá fornecer uma altura mínima cross browser de 50px. IE6 irá ler "_height", onde outros navegadores não vai. Se você não hacks, use uma instrução condicional.

Rico

Answer 2

você poderia dar um height ao id #content

ou

aplicar a background:url("/images/Doelgroep-Background-Image.jpg") no-repeat scroll left top transparent; para #mainContent vez de #content

Answer 3

overflow para background-images é impossível, mas você pode definir um min-height para content (ou definir a imagem em outro div com menor z-index e posicioná-lo abolutely a aparecer no lugar que você quer - mas isso é uma solução muito ruim)

Answer 4

Os controles de atributos overflow que acontece com o div quando o conteúdo é grande demais para caber - se você tiver um div de tamanho fixo com algum conteúdo que possa transbordar, você geralmente quer a opção auto. overflow não tem efeito sobre uma imagem de fundo.

Para o seu caso, parece que você deseja especificar uma min-height sobre a div conteúdo. Note que este não é suportado pelos navegadores mais antigos como o IE6, que você pode ou não se preocupam. Há muitas maneiras de contornar isso, porém.

Answer 5

O que você quer é a altura de 100% você pode conseguir isso com o seguinte.

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

Você precisa do min-height eo corpo precisa de uma altura de forma cada elemento filho do corpo seguirá a regra.

Além disso, adicionando-min altura: 100%; a todas as regras CSS vai resolver todos os seus problemas para qualquer navegador grau A.

Answer 6

Se você sabe o #sidebar ou #main sempre terá uma altura visual igual ou maior do que a imagem de fundo, em seguida, você pode simplesmente adicionar a imagem de fundo:

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

em vez de onde é um momento em #content