?
Solved

CSS background image gets scrolled over by html background image

Posted on 2011-03-07
4
Medium Priority
?
235 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 3

Expert Comment

by:RussPitcher
ID: 35058225
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
ID: 35058277
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 2000 total points
ID: 35058318
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
ID: 35058345
That was the ticket, thank you.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

770 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