Solved

How can I extend my background color below the fold?

Posted on 2014-09-05
5
262 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
Comment Utility
Got a link to the page?
0
 

Author Comment

by:brucegust
Comment Utility
0
 
LVL 58

Expert Comment

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

Accepted Solution

by:
Jeffrey Dake earned 500 total points
Comment Utility
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
Comment Utility
Jeffrey! I went back and cleaned it up. Implemented your suggestions and I'm gold.

Thanks!
0

Featured Post

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

762 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now