View Full Version : Need help with Sticky Footer

02-24-2011, 07:15 PM
Hello -

So i am using Sticky Footer. Although the background does not meet with the footer background. Anyone know why? Code below:

html, body { height:100%; background:#FFF; font:13px Calibri, Verdana, sans-serif; }
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }
div#wrapper { min-height:100%; }
div#content { overflow:auto; padding-bottom:256px; background:url(../images/bg.png) repeat-y; width:932px; margin:0 auto; position:relative; }
div#header { width:932px; padding:0; height:134px; background:url(../images/header_bg.png) no-repeat center; position:relative; z-index:1; margin:0 auto; }
div#menu-left { width:28px; height:57px; background:url(../images/menu_left.png) no-repeat; position:absolute; left:-12px; top:134px; z-index:2; }
div#menu-section { width:900px; height:57px; background:url(../images/menu_bg.png) no-repeat; position:absolute; left:16px; top:134px; }
div#search { position:absolute; right:53px; top:90px; }
div#menu-right { width:34px; height:57px; background:url(../images/menu_right.png) no-repeat; position:absolute; right:-18px; top:134px; z-index:2; }
div#footer { position:relative; margin:0 auto; margin-top:-257px; height:256px !important; clear:both; width:932px; background:url(../images/footer_bg.png) no-repeat; }

Link: http://www.gorillaonemedia.com/home.php

Thanks in advance!

02-24-2011, 07:22 PM
Hello eberdome,
You only get one full-height element so your background image needs to go on that one.
Try it like this -

div#wrapper {
width: 932px;
margin: 0 auto;
background:url(../images/bg.png) repeat-y;
div#content {
/*background:url(../images/bg.png) repeat-y; */
margin:0 auto;

02-24-2011, 07:32 PM

Thanks for the quick reply! Your solution worked great! You always save my ***! Thanks again!

- eberdome

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum