Hi Kevin,
On Mon, 2009-09-21 at 21:54 -0400, Kevin Rodenhofer wrote:
> Bill, I consolidated the 3 messages, and made the appropriate
> corrections. Here you go:
>
> I don't know if this will work for you, but this is what I did for a
> similar situation. I copied the code directly from my project:
>
I don't think I explained the problem(s) I'm having very well. From my
current perspective there are two problems, but I realize they may turn
out to be just two manifestations of a single screw-up on my part ;)
The first problem is evident on the signup page at www.shopkeepapp.com
(should have directed you there to begin with).
The panel in the middle behind the signup form is actually two images:
an 11px-wide one on the left that gets repeated, and an 11px one on the
right that finishes the image off. The visual intent is shading on the
bottom and right edges of the panel for a 3D effect.
The problem is that the image on the right is not expanding to the same
height as the one on the left.
I realize that I could, for example, change the min-height on the
right-hand image. The content on this page is static so that would
work. The rest of the site uses this same model as backgrounds for
content that's not static though. There are forms of many sizes, there
are forms that have content that can be expanded, and there are lists
where I would like to only have as much background as the content
requires.
So I think what I need is to figure out how to get this background to
expand to the size of its container.
Any guidance is much appreciated!
Best regards,
Bill
> #wallpaper {position: absolute; top: 0; left: 0; width: 100%; height:
> 100%; display: block; z-index: 1;}
>
> #wallpaper is the id for an image that is placed absolutely, with an
> z-index lower than the rest of the content. It is not a background
> image, but an inline image. In all likelyhood, the z-index probably
> isn't needed, if this is the first item in the parent container.
>
> I confirmed that it works in the following browsers (all in Windows 7):
>
> IE 7 & 8
> Firefox 3.5.3
> Safari 4.0
> Chrome 3.0.195.21
>
> Maybe it will work for you.
>
>
>
> bill walton wrote:
> > Greetings all;
> >
> > I'm having a 'dickens of a time' getting a background image to resize
> > dynamically based on content. I'm probably not explaining it worth a
> > darn, but it's pretty easy to see here:
> >
> > http://anysubdomain.shopkeepapp.com
> >
> > The specific problem on this page is that the right-side image is not
> > expanding vertically to match the left side.
> >
> > If you fill in the form (use any nonsense you want except for the email
> > address), you'll get the welcome page which displays both images at the
> > min-height setting.
> >
> > On the pages inside the site, which you can access if you click the link
> > in the email you'll get, I have another, very similar problem where that
> > even the left-side image not sizing to fit content. But maybe the fix
> > for that is the same as the fix for the right-side image on the sign-up
> > page.
> >
> > Overall, I'm using floats for positioning and % and em for widths and
> > heights pretty much everywhere. Maybe that's my problem. It seems to
> > be working with respect to putting everything where I want it. But if
> > using floats is what's causing my difficulties, I'm very open to
> > changing it. The bottom-line objective is to get these background
> > images to resize based on content.
> >
> > Thanks in advance for you help!
> >
> > Bill
> >
> >
> >
> > ______________________________________________________________________
> > css-discuss [cs...@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> >
> >
>
> ______________________________________________________________________
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
