Solved

CSS background image gets scrolled over by html background image

Posted on 2011-03-07
4
224 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 500 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

733 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