Learn how to a build a cloud-first strategyRegister Now

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

CSS background image gets scrolled over by html background image

I have a page in development and am having issue with the background. There is a Body and HTML background so I could get an overlay effect.
The issue is when it comes to scrolling the bottom images roll over the tree image I have. I would like for the images tiled background image to stay put and never move and the tree to stay at the bottom of the screen.

http://www.demos.graycomputer.net/coast

/* DIV tags */
body {
	margin: 0;
	padding: 0;
	border: 0;
}
#container {
	width: 860px;
	margin: 0 auto;
	padding: 0;
	border: 0;
}
#masthead {
	width: 860px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}
#iMenu {
	width: 860px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
}
#column_l {
	position: relative;
	float: left;
	margin: 0;
}
#column_r {
	position: relative;
	float: left;
	margin: 0;
}
#content {
	width: 830px;
	margin: 0;
	padding: 15px;
	border: 0;
}
#footer {
	width: 100%;
	overflow: auto;
	clear: both;
	margin: 0;
	padding: 0;
	border: 0;
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<!-- #BeginTemplate "../master_KIITS.dwt" -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>Rockdog Entertainment | Kick It In The Sticks</title>
<style type="text/css">

.style2 {
	text-align: center;
}
.style4 {
	text-align: center;
}
.style5 {
	font-size: large;
}
.style6 {
	border-width: 0px;
}
.style7 {
	border-style: solid;
	border-width: 1px;
}
</style>
<!-- Code to set popup size -->
<script type="text/javascript">
function popupsize(url) {
newwindow=window.open(url,'name','height=780,width=820,top=200,left=300,resizable');
if (window.focus) {newwindow.focus()}
}
</script>
<!-- #EndEditable -->
<link rel="stylesheet" type="text/css" title="CSS" href="styles/kiitsstyle.css" media="screen" />
<style type="text/css">
.style1 {
	text-align: left;
}
.style2 {
	text-align: center;
}
.style3 {
	border-width: 0;
}
.style4 {
	color: #000015;
	text-decoration: underline;
}
</style>
</head>

<body>
<!-- Begin Container -->
<div id="container" style="width: 832px" class="style2">
	<!-- Begin Masthead -->
	<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="728" height="150">
  <param name="movie" value="images/banner.swf" />
  <param name="quality" value="high" />
  <param name="allowScriptAccess" value="always" />
  <param name="wmode" value="transparent" />
     <embed src="images/banner.swf"
      quality="high"
      type="application/x-shockwave-flash"
      WMODE="transparent"
      width="728"
      height="150"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
      allowScriptAccess="always" />
</object>	<!-- End Masthead -->
	<!-- Begin iMenu -->
	<div id="navigation">
		<center>
		<table cellpadding="0" class="style7" cellspacing="0">
			<tr>
				<td>
				<a href="kickit.htm" target="_self">
				<img alt="" height="132" src="images/homeicon.png" width="105" class="style3" /></a></td>
				<td>
				<a href="rules.html" target="_self">
				<img alt="" height="132" src="images/rulesicon.png" width="100" class="style3" /></a></td>
				<td>
				<a href="map.html" target="_self">
				<img alt="" height="132" src="images/compassicon.png" width="101" class="style3" /></a></td>
				<td><a href="tickets.html" target="_self">
				<img alt="" class="style3" height="132" src="images/ticketsicon.png" width="95" /></a></td>
				<td><a href="artists.html" target="_self">
				<img alt="" class="style3" height="132" src="images/artistsicon.png" width="110" /></a></td>
				<td><a href="sponsors.html" target="_self">
				<img alt="" class="style3" height="132" src="images/sponsorsicon.png" width="110" /></a></td>
				<td><a href="http://www.rockdogentertainment.com">
				<img alt="" class="style3" src="images/rockdogicon.png" height="132" width="90" /></a></td>
			</tr>
		</table>
		</center>
	</div>
	<!-- End iMenu -->
	<!-- Begin Left Column -->
	<div id="column_l" style="left: 5px; top: 0px; width: 794px">
		<!-- #BeginEditable "content" -->
		<br />
		<h1>
	
		Saturday October 23RD 
		2010</h1>
			<!-- Commercial Clip  -->
		<embed src="kiitstvcomm.wmv" height="360" width="400" />

		<br />

		<p class="style5">Enigma, GA - Barnes Farm on Fire Tower Road</p>
		<p><strong>Gates Open at 5:30pm and Music Starts at 6:45pm</strong></p>
		<p class="style4">
		&nbsp;Brantley Gilbert Starts at 10:30<br />
		Food and Drink vendors on Site<br />
				Advanced tickets $ 20.00 Day of Show $ 25.00<br />
		KIDS 12 AND UNDER GET IN FREE!</p>
		<p class="style4">
		<a href='contactus.html' onClick='popupsize(this.href);return(false);'>
		To Request More Information Click Here</a></p>
		<h4>
		<a href="sponsors/hiltoninndeal.jpg" target="_blank">
		<img alt="" class="style6" height="200" src="sponsors/hiltondealsmall.jpg" width="314" /></a></h4>
		<h1>
		Featuring:</h1>
		<p>
		<a href="http://www.brantleygilbert.com/" target="_blank">
		<img alt="Brantley Gilbert" height="132" src="../images/Band%20Photo/Brantly%20Gilbert/brantleylogo.bmp" width="554" class="style6" /></a><br />
		<br />
		Fan Pages<br />
		<a href="http://www.brantleygilbert.com/" target="_blank">
		www.brantleygilbert.com</a><br />
		<a href="http://www.facebook.com/BrantleyGilbertMusic" target="_blank">
		<img alt="" class="style6" height="50" src="images/fblogo.jpg" width="50" /></a>&nbsp;&nbsp;
		<a href="http://www.myspace.com/brantleygilbertmusic" target="_blank">
		<img alt="" class="style6" height="50" src="images/mslogo.jpg" width="50" /></a><br />
		<br />
		<object width="680" height="500">
		<param name="movie" value="http://www.youtube.com/v/RZ9kIxWTveQ?fs=1&amp;hl=en_US&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999"></param>
		<param name="allowFullScreen" value="true"></param>
		<param name="allowscriptaccess" value="always"></param>
		<embed src="http://www.youtube.com/v/RZ9kIxWTveQ?fs=1&amp;hl=en_US&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="680" height="450"></embed>
		</object></p>
	<!-- Start of StatCounter Code -->
	<script type="text/javascript">
		var sc_project=6220945; 
		var sc_invisible=0; 
		var sc_security="79bbccc2"; 
		var sc_text=2; 
	</script>
		
	<script type="text/javascript"
		src="http://www.statcounter.com/counter/counter.js">
	</script>
	<noscript>
		<div class="statcounter"><a title="tumblr counter"
		href="http://statcounter.com/tumblr/" target="_blank">
		<img class="statcounter" src="http://c.statcounter.com/6220945/0/79bbccc2/0/" alt="tumblr counter" />
		</a></div>
	</noscript>
<!-- End of StatCounter Code -->

		<!-- #EndEditable --></div>
	<!-- End Left Column -->
	<!-- Begin Right Column -->
	<!-- End Right Column -->
	<!-- Begin Footer -->
	<div id="footer">
		<hr/>
		<p style="width: 752px"><a href="../index.htm">Rockdog Home</a> | 
		<a href="kickit.htm">K<span class="style4">ick It In The Sticks Home</span></a> |
		<a href="contactus.html">Contact</a></p>
	</div>
	<!-- End Footer --></div>
<!-- End Container -->

</body>

<!-- #EndTemplate -->

</html>

Open in new window

@import url("layout.css");
body {
	font-family: "Trebuchet MS", sans-serif;
	background:url('../images/tree.png') no-repeat;
	background-position:0px bottom;
	background-attachment: fixed;
	margin:0;
	padding:0;
	/* Height is 100%, so the tiled BG will tile all the way down
	the page, not just as far down as the page's content
	(when the content's height < window's height) */
	height:100%;
}
html {
	background:#CCA url('../images/tile.jpg') repeat-x;
	background-position:0px bottom;
	background-attachment: fixed;
	/* Height is 100%, so the body can be 100% */
	height:100%;
}
#container {
	border-right: 2px solid #8c8c8c;
	border-bottom: 2px solid #8c8c8c;
	border-left: 2px solid #8c8c8c;
	background-color: #fff;
}
#masthead {
	text-align: center;
	background-color: #fff;
	background-repeat: no-repeat;
}
#navigation {
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	background-color: #fff;
}
html>body #navigation {
	overflow: hidden;
}
#column_l {
	width: 367px;
	padding: 15px;
	background-color: #fff;
}
html>body #column_l {
	width: 370px;
	padding: 0 15px;
	background-color: #fff;
}
#column_r {
	width: 217px;
	padding: 15px 10px;
	background-color: #fff;
}
html>body #column_r {
	width: 220px;
	padding: 15px 10px;
	background-color: #fff;
}
#content {
	background-color: #fff;
}
#footer {
	text-align: center;
	padding-bottom: 10px;
}
html>body #footer {
	text-align: center;
	padding-bottom: 0;
}
/* Masthead */
#masthead h1 {
	color: #000;
	margin-bottom: 0;
}
#masthead h3 {
	color: #9a9;
	margin-top: 0.5em;
}
/* Navigation */
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
#navigation li {
	float: left;
}
#navigation a {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	display: block;
	padding: 5px;
	border: 1px solid #cdc;
}
#navigation a:hover {
	font-weight: bold;
	text-decoration: none;
	color: #fff;
	border: 1px solid #009;
	background-color: #750;
}

/* Right Column */
#column_r img {
	border: 1px solid #808080;
}
/* Site typography */
h1 {
	font-size: xx-large;
	color: #c77;
}
h2 {
	font-size: x-large;
	color: #c77;
}
h3 {
	font-size: large;
	color: #c77;
}
h4 {
	font-size: medium;
	color: #c77;
}
ul {
	font-size: small;
	color: #000;
}
ol {
	font-size: small;
	color: #000;
}
p {
	font-size: small;
	color: #000;
}
blockquote {
	font-size: small;
	color: #000;
}
h5 {
	font-size: x-small;
	color: #c77;
}
h6 {
	font-size: xx-small;
	color: #c77;
}
/* Footer */
#footer p {
	font-size: x-small;
	color: #c77;
}
/* Links */
a {
	color: #000015;
	text-decoration: underline;
}
a:hover {
	color: #000000;
	text-decoration: none;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

Open in new window

0
rodneygray
Asked:
rodneygray
  • 3
1 Solution
 
RussPitcherCommented:
You've got 'height: 100%'  on your body element.  When the inner content spills over and you scroll to view it it 'lifts' the body so that you just view the overflow.  Remove that css and it works fine

0
 
RussPitcherCommented:
By the way, if you're using Internet Explorer 8 ( I think it also works in 7 and 9 as well) you can press F12 to bring up the developer tools where you can inspect and modify the current code to see what happens.  Really useful!
 Internet Explorer Dev Tools
0
 
RussPitcherCommented:
You can also fix it by changing

height: 100%
   to
min-height:100%

Which may be what you're after if you've a page with minimal content...
0
 
rodneygrayAuthor Commented:
That was the ticket, thank you.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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