[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 306
  • Last Modified:

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
0
brucegust
Asked:
brucegust
  • 2
  • 2
1 Solution
 
GaryCommented:
Got a link to the page?
0
 
brucegustPHP DeveloperAuthor Commented:
0
 
GaryCommented:
Confused, what is wrong with that? The background extends to the bottom
0
 
Jeffrey Dake Senior Director of TechnologyCommented:
Your isssue is how you are doing the background.  The bgTop is at the end of your html and you have a height of 1000px.  If the window is larger than that the background stops.  Two options.  You can add to the wrapper to have a background color the same, or what I would prefer is to change the rules for the backgrounds to be on the #wrapper instead of having html at the bottom of the page.
0
 
brucegustPHP DeveloperAuthor Commented:
Jeffrey! I went back and cleaned it up. Implemented your suggestions and I'm gold.

Thanks!
0

Featured Post

[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now