<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="icon" href="animated_favicon.gif" type="image/gif" >
<title>Future Hunt - Home</title>
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body
{
height:100%;
margin:0;
padding:0;
}
/* Set the position and dimensions of the background image. */
#page-background
{
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
overflow:auto;
}
#menu
{
position:absolute;
top:0;
left:0;
}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content
{
z-index:1;
padding:10px;
}
a:link
{
color:white;
}
a:visited
{
color:white;
}
a:hover
{
color:black;
}
</style>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {z-index:-1;}
#content {position:static;padding:10px;}
pre
{
cursor:url('duster.cur');
}
</style>
<![endif]-->
</head>
<body>
<a name="top"></a>
<div id="menu">
<center>     <a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="Home.html" style="position:fixed">HOME</a>
<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Courses</a>
<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Colleges</a>
<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Studying Abroad</a>
<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">Buzz!</a>
<a style="font-family:pencilPete Font;font-size:32px;font-weight:bold" href="#" style="position:fixed">More Buzz!</a></center>
</div>
<div id="page-background">
<center><img src="back.jpg" width="100%" height="100%"></center>
</div>
<center><input type="image" src="bullseye.jpg" onclick="window.location='Home.html'" style="position:relative;top:65px;"/><br/><br/><input type="image" src="future hunt.png" style="position:relative;top:65px;"/></center><br/><br/><br/><br/><br/><br/><br/>
<div id="content">
<br/><br/><br/><br/>
<center style="font-family:pencilPete Font;font-size:30px;font-weight:bold;color:crimson;left:55px;">Done with your undergraduation? Scratching your heads over the plethora of courses
offered<br/>by different universities? </center><br/><br/><br/>
<center style="font-family:pencilPete Font;font-size:30px;font-weight:bold;color:crimson;left:250px">Pursuing undergraduation? Looking forward to build your profile to stand a higher chance <br/>of getting admitted to top universities of the world?</center>
<br/><br/><br/>
<div align="50px;"><p style="font-family:pencilPete Font;font-size:20px;font-weight:bold;color:midnightblue;"> Then <i>Future Hunt</i> is your one stop destination. At <i>Future Hunt</i>, you will find information on different popular courses offered in different parts of the world, the top universities offering these courses, tips on profile building and a chance to connect with the <br/> Indian students who have made it to this universities.<br/><br/> So what are you waiting for? Start exploring our website................
<br/><br/> If you have comments or questions , or simply need more information and want to contact us, click on the contact button on any page <br/> within this site.</p></div>
<a href="#top" title="top" style="font-family:pencilPete Font;font-size:20x;font-weight:bold">Top</a>
</div>
</body>
</html>
can somebody help me!!
The content section is getting overflowed over the background image…can someone point out my mistake?
Thanx in advance!
It’s hard to tell what’s going on with that code, because we can’t see the images. Do you have a live link?
No i dont have a live link as yet…no domain name registered as of now…btw i have attached the back image…if u could please download it and run it…it would be great!
this is the background image i have used…
Could you be more specific? Anyhow, this is not the best way to go about web design.
A background image is best placed in the CSS rather than in the HTML. But first tell us what look you are trying to achieve.
Actually am a beginner. What i am trying to achieve here is that i want the contents to not overflow outside the background image. I want it to hide as soon as it reaches the navigation menu when we scroll down. Hope you are getting what i meant. 
Hi,
That’s not really a viable layout concept I’m afraid. You would need to put a scrollbar on the middle content which will look ugly.
I guess you wanted something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Future Hunt - Home</title>
<style type="text/css">
a:link {
color:white;
}
a:visited {
color:white;
}
a:hover {
color:black;
}
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {
height:100%;
margin:0;
padding:0;
}
/* Set the position and dimensions of the background image. */
#page-background {
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#content {
z-index:1;
position:relative;
width:100%;
margin:auto;
height:100%;
}
.inner {
position:absolute;
top:80px;
right:70px;
bottom:100px;
left:70px;
overflow:auto;
}
</style>
</head>
<body>
<div id="page-background"> <img src="http://www.psdgraphics.com/wp-content/uploads/2009/03/green-blank-blackboard.jpg" width="100%" height="100%"> </div>
<div id="content">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
</div>
</div>
</body>
</html>
However the above won’t work in Ie6 and I think it’s a little ugly with the scrollbar.
You would be better off slicing the background so that the page can extend below the fold as per normal sites.
Yes this is what i wanted. Thanx a ton guys! Actually i will be changing the scrollbar later on. Thanx both of u for the great help!
Btw what was changed in the code?
Ohh i get it now! An inner div Cool