Stretching an image with css?

Discussion in 'HTML' started by Rabel, Jul 28, 2008.

  1. Rabel

    Rabel Guest

    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, Jul 28, 2008
    #1
    1. Advertising

  2. Rabel

    Rabel Guest

    On Jul 28, 5:06 pm, Ben C <> wrote:
    > On 2008-07-28, Rabel <> wrote:
    >
    > > 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.

    >
    > 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, Jul 28, 2008
    #2
    1. Advertising

  3. Rabel

    Rabel Guest

    On Jul 29, 3:39 am, Ben C <> wrote:
    > On 2008-07-28, Rabel <> wrote:
    >
    >
    >
    > > On Jul 28, 5:06 pm, Ben C <> wrote:

    > [...]
    > > 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.

    Thanks,
    Randy
    Rabel, Jul 29, 2008
    #3
  4. Rabel

    Rabel Guest

    On Jul 29, 5:11 pm, Ben C <> wrote:
    > On 2008-07-29, Rabel <> wrote:
    >
    >
    >
    >
    >
    > > On Jul 29, 3:39 am, Ben C <> wrote:
    > >> On 2008-07-28, Rabel <> wrote:

    >
    > >> > On Jul 28, 5:06 pm, Ben C <> wrote:
    > >> [...]
    > >> > 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
    Rabel, Aug 4, 2008
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    1,266
  2. =?Utf-8?B?U3JpZGhhcg==?=

    stretching the background image instead of tiling

    =?Utf-8?B?U3JpZGhhcg==?=, Nov 23, 2005, in forum: ASP .Net
    Replies:
    3
    Views:
    8,195
    Mats Lycken
    Nov 30, 2005
  3. Arthur Dent

    Table stretching excessively in IE

    Arthur Dent, Mar 6, 2006, in forum: ASP .Net
    Replies:
    4
    Views:
    1,001
    slagomite
    Mar 7, 2006
  4. Lee Harris

    Image Stretching

    Lee Harris, Oct 27, 2003, in forum: HTML
    Replies:
    1
    Views:
    505
    David Graham
    Oct 27, 2003
  5. Chitty
    Replies:
    0
    Views:
    159
    Chitty
    Oct 19, 2004
Loading...

Share This Page