Solved

How can I extend my background color below the fold?

Posted on 2014-09-05
5
269 Views
Last Modified: 2014-09-06
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
Comment
Question by:brucegust
  • 2
  • 2
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40306889
Got a link to the page?
0
 

Author Comment

by:brucegust
ID: 40306900
0
 
LVL 58

Expert Comment

by:Gary
ID: 40306934
Confused, what is wrong with that? The background extends to the bottom
0
 
LVL 10

Accepted Solution

by:
Jeffrey Dake earned 500 total points
ID: 40307058
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
 

Author Comment

by:brucegust
ID: 40307957
Jeffrey! I went back and cleaned it up. Implemented your suggestions and I'm gold.

Thanks!
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question