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/