Minimum div height to preserve background image

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Chandler - 28 Sep 2004 22:52 GMT

Hi,

I have a div with a background image. The height of the div needs to
stretch to accomodate any changes of internal content, but needs to
remain at least 400px so that the background image is showing at all
times. I can't set the height to 400px, because it will prevent any of
it's other styles from being displayed if the content's height exceeds
400px. I also can't set the height to auto, since the content might be
much be less than 400px, thereby causing the background-image to be cut
off. Any ideas how to approach this?

Thanks,
AC

Reply to this Message

David Dorward - 28 Sep 2004 23:12 GMT

> I have a div with a background image. The height of the div needs to
> stretch to accomodate any changes of internal content, but needs to
> remain at least 400px so that the background image is showing at all
> times.

In a world where most people used a browser which supported min-height, this
would be easy:

#foo {
min-height: 400px;
}

Thankfully, this isn't too difficult to work around. Internet Explorer has a
big (shock) in which is treats the height property of elements with
overflow: visible (the default) as min-height.

So we get:

#foo {
height: 400px; /* for IE */
min-height: 400px; /* for not-IE */
}

html>body #foo {
height: auto; /* for not-IE */
}

That should, IIRC, do the trick.

Signature

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Reply to this Message

Chandler - 29 Sep 2004 00:32 GMT

Works great..thanks a million.

Hope the next version of IE recognizes "min-height" (or at least if it
doesn't, it doesn't start recognizing "html>body #foo"!!).

AC

Reply to this Message

Mark Tranchant - 29 Sep 2004 08:11 GMT

>>I have a div with a background image. The height of the div needs to
>>stretch to accomodate any changes of internal content, but needs to
[quoted text clipped - 3 lines]
> In a world where most people used a browser which supported min-height, this
> would be easy:

Good article here:

http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/index.php

Signature

Mark.
http://tranchant.plus.com/

Reply to this Message

Andrew Thompson - 28 Sep 2004 23:18 GMT

> I have a div with a background image. ..

I don't see it. URL?

> ..The height of the div needs to
> stretch to accomodate any changes of internal content, but needs to
> remain at least 400px so that the background image is showing at all
> times.

If the image is so important that it must be "showing at
all times", perhaps it should be in an image element.

You are not 'crossing the boundaries' and putting content
in your styles are you?

Signature

Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane

Reply to this Message

Chandler - 29 Sep 2004 00:24 GMT

> You are not 'crossing the boundaries' and putting content
> in your styles are you?

No, the background image is pretty much a large watermark of the
business logo which works best as such, not an image.

Thanks,
AC

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / September 2004

Minimum div height to preserve background image