Solved

How can I extend my background color below the fold?

Posted on 2014-09-05
5
272 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Remove lines by logo 2 37
Zoom the page when you go in from your phone 3 62
Changing way home page shows 2 36
Adding bootstrap to only Content page and NOT master page 1 49
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

839 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