Link to home
Start Free TrialLog in
Avatar of Bruce Gust
Bruce GustFlag for United States of America

asked on

How can I extend my background color below the fold?

Attached is a screen shot of what you see at http://hihatwebdesign.com/vbs/student_insert.php. The problem is obvious in that in previous iterations, my body content was a fixed height. This time, I'm allowing things to scroll and I'm having a tough time figuring out how to get the bottom portion of the screen with a background color of #81aade.

Every time I've tried to do a "background-color:#81aade;" somewhere, I wind up with a with a solid background and I just decided it was time to contact the ninjas. My stylesheet and html are attached.

Thanks!

Stylesheet (I've only included that which I though was relevant. You can view the whole thing at http://www.hihatwebdesign.com/vbs/stylesheet.css)...

#wrapper{margin:0;padding:0;min-height:100%;}
html, body{height:100%;margin:0;}

#header{width:956px;margin:0 auto;height:260px;position:relative;}
/*this is your header graphic */

#logo{width:956px;height:260px; overflow:hidden;}

#page{width:956px;margin:0 auto;border-top:none;padding-bottom:0px;}
/*this is not necessary. This is the gradient that starts just below the menu in your example. However, the content id that you see below gives you your "tray" */

#content{float:left;width:956px; padding-top:25px;padding-bottom:0px;min-height:450px; background-color:#ffffff;}

#footer{padding-top:525px;}
#footer p{text-align:center;font-size:9px;color:#FFF;margin:0;padding:0;background-color:transparent; font-family: Verdana, Microsoft Sans Serif;}
#footer a{font-family: Verdana, Microsoft Sans Serif; font-size: 9px; color: #ffffff;}

#bglayout{height:50%;width:100%;position:absolute;left:0px;top:0px;z-index:-1;}
/*this is your background gradient, starts at the top and goes all the way down*/

#bgtop{margin:0;min-height:1000px;height:100%;background:#252d9c url(images/background_sliver.jpg) repeat-x top;}
/*these are your clouds */
.left{position:relative;width:100%;background:url(images/right_cloud.jpg) no-repeat left top;height:1000px;float:left; z-index:100;}
.right{position:relative;width:100%;background:url(images/right_cloud.jpg) no-repeat right top;height:1000px; z-index:100;}

/*here's your regular stuff*/

Open in new window


...and here's my html:

<body onLoad="">
<!-- this first div sets the specs for the page in terms of dimensions, font style etc -->
	<div id="wrapper" >
	<!-- the header div sets the dimension for your header graphic -->
		<div id="header"><BR><BR>
		<!-- the logo div establishes the center graphic -->
			<div id="logo">
				<table id="Table_01" width="956" height="236" border="0" cellpadding="0" cellspacing="0">
				<tr>
				<td rowspan="2" class="michelle">
				<img src="images/header.jpg">
				</tr>
				<tr>
				<td class="tray"></td>
				</tr>
				</table>
			</div>
		</div>
		<div id="page">
<div id="content">
This is where all my page content goes...
</div>

<div id="footer">
			<p>Thompsons Station Church | Preschool / Children's Ministry | PO Box 2018 | Thompsons Station, TN 37179 | (p) 615.791.8319 |<BR>(w) <A HREF="http://thompsonstationchurch.org" target="_blank">thompsonstationchurch.org</a> | (e) <A HREF="mailto:bruce@brucegust.com">bruce@brucegust.com</a> |</p><br><div style="text-align:center;"><img src="http://newhopeforyou.com/images/web_signature.png"></div>
			</div>
		</div>
	</div>
</div>
<div id="bglayout" >
	<div id="bgtop" >
		<div class="left" >
			<div class="right" >
			</div>
		</div>
	</div>
</div>

</body>
</html>
		

Open in new window


What do you think?
Screen-Shot-2014-09-05-at-12.42.02-PM.pn
Avatar of Gary
Gary
Flag of Ireland image

Got a link to the page?
Avatar of Bruce Gust

ASKER

Confused, what is wrong with that? The background extends to the bottom
ASKER CERTIFIED SOLUTION
Avatar of Jeffrey Dake
Jeffrey Dake
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Jeffrey! I went back and cleaned it up. Implemented your suggestions and I'm gold.

Thanks!