Tee G. Peng wrote:
> Hi, I am doing a page that I can't change the markup and source order
> (think CSS zen garden!), and is facing a problem with background image.
>
> The markup looks like so
>
> <div id="wrap>
> <div>content goes here </div>
> <div>more content ... </div>
>
> <div id="footer"> <p>with background image in the footer div </p></div>
>
> </div>
>
> CSS:
>
> #wrap {
> background: url(images/content-bg.png) repeat-y ;
> width:914px;;
> margin:80px auto 0 auto;}
>
> #footer {
> clear: both;background: url(images/ftr-bg.png) no-repeat left bottom;
> text-align: center;}
>
> The wrapper background image goes all the way down which is great
> but it goes beyond the footer. I need the footer image sticks to the
> bottom.
>
You need the footer to stick to the bottom of the wrapper? In that case,
position the wrapper relatively, then position the footer absolutely and
give it a bottom value of 0. Full CSS at:
http://scott.sauyet.com/CSS/Demo/FooterDemo1.html
http://solardreamstudios.com/learn/css/footerstick/
(both the same)
There is a less buggy way of making a footer stick, but it requires
placing the footer outside the wrapper, so it won't work for you. The
method referenced above should work for most cases, so I wouldn't worry
too much about it.
Zoe
--
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
