Solved

CSS background image gets scrolled over by html background image

Posted on 2011-03-07
4
213 Views
Last Modified: 2012-05-11
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
Comment
Question by:rodneygray
  • 3
4 Comments
 
LVL 3

Expert Comment

by:RussPitcher
Comment Utility
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
 
LVL 3

Expert Comment

by:RussPitcher
Comment Utility
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
 
LVL 3

Accepted Solution

by:
RussPitcher earned 500 total points
Comment Utility
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
 
LVL 1

Author Comment

by:rodneygray
Comment Utility
That was the ticket, thank you.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Bootstrap Datable Spinner 3 26
HTML page and JavaScript 2 47
Library to convert HTML to PDF. 8 41
modify h2 4 0
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 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

14 Experts available now in Live!

Get 1:1 Help Now