Stretching an image with css?

[Rabel]

Hi I am pretty new to css design but I would like to have an element
stretch from the bottom of one element to the top of the other whose
position is determined by the height of the main content.
In the element that I would like to stretch I have an image that just
has a few colors vertically so it should be able to stretch fine. But
I cant figure out how to connect the two elements and stretch the
image - any help is really appreciated.

 

[Rabel]

It's quite difficult to do that. Normally you could use absolute
positioning, making the "other" element position: relative and the one
you want to stretch position: absolute with top, bottom, left and right
all set to 0.

But the rules for images are that if you do that the image will get its
intrinsic width and height and right and bottom will be ignored.

The only way to make an image stretch is to set width and height on it,
which usually means knowing the width and height of the container.

But something like this works in most browsers:

<div style="position: relative">
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
<div style="position: absolute;
top: 0; left: 0; right: 0; bottom: 0;">
<img src="foo.png" style="display: block;
width: 100%; height: 100%">
</div>
</div>

We use a non-replaced element (the absolutely positioned div) because
that can be pegged out to the four corners of its normal-flow auto
height container (it's the only thing that can).

And then we put the image inside that, setting its width and height to
100% each, because the only way to stretch a replaced element is to set
width and height.

Now a browser implementor could decide that that height: 100% is a
height of an auto-height container, so should be ignored. On the other
hand the absolutely positioned div's height in this case doesn't depend
in any way on its contents, so there is no actual circularity and the
100% can be resolved. It works in FirefoxOperaKonqueror.

Thanks Ben I got that to work using the bg

<div style="position: relative; background-image: url(images/
template_r13_c1.jpg); background-repeat: repeat-y;">
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<p>
Hello<p>
Hello<p>
Hello<p>
</div>

The problems with this are that it is getting the height from within
the div, where I need it to get the height from a separate element -
it also writes the text on top. Any ideas what I can do?

Thanks,
Randy

 

[Rabel]

You need it to get the height from which element?

It might be easiest to post a url to a test case.

Hi Ben,
sorry still a lot of work to be done, but the height I need is from
the main content which will change size.

Description:
This image problem is on the lower left and I need it to fill the
space between the menu on the upper left and the menu at the bottom
whose position is determined by the height of the main contents.

Thanks,
Randy

 

[Rabel]

[...]
Thanks Ben I got that to work using the bg
<div style="position: relative; background-image: url(images/
template_r13_c1.jpg); background-repeat: repeat-y;">
            Hello<br>
            Hello<br>
            Hello<br>
            Hello<br>
            Hello<br>
            Hello<br>
            Hello<p>
            Hello<p>
            Hello<p>
            Hello<p>
</div>
The problems with this are that it is getting the height from within
the div, where I need it to get the height from a separate element -
it also writes the text on top. Any ideas what I can do?
You need it to get the height from which element?
It might be easiest to post a url to a test case.

Hi Ben,
sorry still a lot of work to be done, but the height I need is from
the main content which will change size.

Description:
This image problem is on the lower left and I need it to fill the
space between the menu on the upper left and the menu at the bottom
whose position is determined by the height of the main contents.

A lot depends on how the upper left and lower left menus are getting
their widths and heights. If you're setting them then you can use
something similar to the original suggestion.

<div id="container">
    <div id="upperLeftMenu">...</div>
    <div id="bottomLeftMenu">...</div>
</div>

Suppser #upperLeftMenu is height: 3em and bottomLeftMenu is height: 4em.

Then you can add

<div id="container">
    <div id="upperLeftMenu">...</div>
    <div id="bottomLeftMenu">...</div>
    <div id="wallpaper"></div>
</div>

#container { position: relative }
#wallpaper
{
    position: absolute;
    top: 3em;
    bottom: 4em;
    width: 10em;
    left: 0;
    background-image: url(etc);
    background-repeat: repeat-y;

}

Otherwise, if the top and bottom menus have heights determined only by
their contents, you may need to make the whole thing a three-row table.- Hide quoted text -

- Show quoted text -

Thanks Ben - I am having a little trouble following you - sorry I know
only very basic css. Here is a link to the mock up

http://creativeness.com/temptest/test3.html
and the css is
http://creativeness.com/temptest/test3.css

What would be your suggestion to get that left side bottom image to
extend to the bottom menu. Thanks again I really apprieciate your
help.

Randy