Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Stretching an image with css?

Reply
Thread Tools

Stretching an image with css?

 
 
Rabel
Guest
Posts: n/a
 
      07-28-2008
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.
 
Reply With Quote
 
 
 
 
Rabel
Guest
Posts: n/a
 
      07-28-2008
On Jul 28, 5:06 pm, Ben C <(E-Mail Removed)> wrote:
> On 2008-07-28, Rabel <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Rabel
Guest
Posts: n/a
 
      07-29-2008
On Jul 29, 3:39 am, Ben C <(E-Mail Removed)> wrote:
> On 2008-07-28, Rabel <(E-Mail Removed)> wrote:
>
>
>
> > On Jul 28, 5:06 pm, Ben C <(E-Mail Removed)> 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
 
Reply With Quote
 
Rabel
Guest
Posts: n/a
 
      08-04-2008
On Jul 29, 5:11*pm, Ben C <(E-Mail Removed)> wrote:
> On 2008-07-29, Rabel <(E-Mail Removed)> wrote:
>
>
>
>
>
> > On Jul 29, 3:39 am, Ben C <(E-Mail Removed)> wrote:
> >> On 2008-07-28, Rabel <(E-Mail Removed)> wrote:

>
> >> > On Jul 28, 5:06 pm, Ben C <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Table stretching excessively in IE Arthur Dent ASP .Net 4 03-07-2006 03:27 PM
stretching the background image instead of tiling =?Utf-8?B?U3JpZGhhcg==?= ASP .Net 3 11-30-2005 11:32 AM
I2C slave clock stretching praveen.kantharajapura@gmail.com VHDL 1 06-14-2005 09:02 AM
Treeview control with "SystemImagePath" property and image sizes stretching. Chitty ASP .Net Web Controls 0 10-19-2004 02:54 PM
Image Stretching Lee Harris HTML 1 10-27-2003 02:18 PM



Advertisments