Solved

CSS background image gets scrolled over by html background image

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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

813 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

17 Experts available now in Live!

Get 1:1 Help Now