Forum Moderators: not2easy
I'm having an issue with getting a background image to repeat all the way down to the bottom of the div it is nested in. If you look below the div that I would like to repeat is #rightcolumn. Thanks in advance for the help.
Here is my code for the body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title of Page</title>
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
</head><body>
<div id="wrapper">
<div id="header"><a href="../index.html"><img src="../images/website_logo.jpg" id="logo" /></a><a href="../index.html"><img src="../images/site_mast.gif"id="mast" /></a>
</div>
<div id="nav">
<ul>
<li><a href="../index.html">Home</a> ¦</li>
<li><a href="../aboutus.html">About Us</a> ¦</li>
<li><a href="../ourapproach.html">Our Approach</a> ¦</li>
<li><a href="../services.html">Services</a> ¦</li>
<li><a href="../training.html">Training</a> ¦</li>
<li><a href="../careers.html">Careers</a> ¦</li>
<li><a href="../contactus.php">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="leftnav">
<ul>
<li><a href="history.html">History</a></li>
<li><a href="leadership.html">Leadership</a></li>
<li><a href="specialists.html">Specialists</a></li>
</ul>
</div>
<div id="textualcontent">
<h1>Heading Title</h1>
<p><strong><u>Heading</u></strong><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer consequat, purus mattis tincidunt ornare, nibh tellus porttitor purus, et dictum pede dolor id purus. Sed placerat urna a mauris. Quisque interdum urna id leo. Integer hendrerit. Vivamus laoreet, augue sit amet rutrum fermentum, est leo commodo dui, id feugiat mi arcu at ante. In tristique viverra dolor. Proin ac leo. Nulla ullamcorper odio vel nisi. Donec ultrices lobortis massa. Mauris auctor. Morbi sit amet dolor ut libero aliquam posuere. Aliquam lorem diam, fermentum in, interdum in, bibendum eget, tortor. Vivamus quis erat.<br />
</p>
<p>Vivamus hendrerit fermentum nisl. Nulla laoreet bibendum odio. Sed erat felis, feugiat nec, varius in, pharetra sit amet, quam. Sed placerat. Vestibulum scelerisque interdum leo. Mauris imperdiet porta nibh. Maecenas tristique, dolor quis sagittis auctor, enim nulla rutrum justo, ac porta velit enim in nibh. Quisque porta eros venenatis felis. Maecenas at dui. Ut vestibulum ultrices elit. Duis ac magna. Nullam vitae ligula in velit laoreet pulvinar. Donec placerat lacus vel erat tempus malesuada. In tempus posuere tortor. Suspendisse potenti. Nullam rutrum lorem at erat.</p>
<p>Etiam lacinia tellus id pede viverra dictum. Pellentesque iaculis quam vitae lectus. Aliquam venenatis. Integer tempor mattis ligula. Duis vulputate. Integer enim. Pellentesque sed velit vel nisl auctor consectetuer. Nullam vitae nibh. Proin molestie. Fusce non orci eu diam dictum sodales.</p>
<p>Duis nibh urna, scelerisque eget, fringilla in, dapibus ut, pede. Proin sit amet odio sed enim laoreet sollicitudin. Sed tellus odio, suscipit vitae, sodales non, vulputate ut, ante. Sed eget orci sit amet justo euismod iaculis. Integer in purus. Sed rhoncus, quam non mollis varius, urna tellus congue libero, ac scelerisque quam lectus ac lacus. Phasellus enim. Cras laoreet iaculis enim. Phasellus lobortis posuere dui. Nullam auctor mattis est. Nam nibh nunc, tincidunt id, auctor vitae, adipiscing vel, lorem. Pellentesque aliquet, nulla suscipit convallis euismod, arcu lacus condimentum quam, id cursus pede mauris sed neque. Suspendisse ultrices condimentum enim. Quisque pretium felis sed metus. Nunc risus urna, tristique eget, facilisis dignissim, porta varius, magna.</p>
<div id="rightcolumn"> </div>
</div>
<div id="footer">
<ul>
<li>© 2007 Website Name ¦ <a href="../sitemap.html">Site Map</a> ¦</li>
<li><a href="../privacy.html">Privacy</a></li>
</ul>
<div>Footer Info goes here </div>
<div>
</div>
</div>
</div>
</body>
</html>
Here is my stylesheet:
html {
overflow-y: scroll;
}body {background-color: #FFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #092755; text-align: center; margin:0;}
.boldline {
font-size: 12px;
font-weight: bold;
text-decoration: underline;
}
.back {
text-align: right;
}
.form {
font-size: 11px;
color: #000000;
}
h1, h2, h3, h4, h5, h6 {font-size: 11px;
margin: 0 0 5px;}
a:link {text-decoration: none; font-weight: normal; color: #092755;}
a:visited {text-decoration: none; font-weight: normal; color: #092755;}
a:active {text-decoration: none; font-weight: normal; color: #978855;}
a:hover {text-decoration: underline; font-weight: normal; color: #978855;}
.course:link,.course:visited,.course:active {
text-decoration: underline;
font-weight: bold;
color: #092755;
}
.course:hover {
text-decoration: underline;
font-weight: bold;
color: #978855;
}
p {margin-top: 0px;}
#wrapper {
background-color: #FFF;
width:954px;
margin: 0 auto;
text-align: left;
padding-left: 0px;
}
#header {position: relative;
width: 954px;
height: 140px;
background: #FFF url(../images/header_bkgd.gif) repeat-x;}
img {border: none;}
#logo {position: relative;
top: 20px;
left: 14px;}
#mast {position: absolute;
top: 55px;
left: 149px;}
#nav {float: left;
width: 944px;
height: 23px;
text-align: right;
padding-right: 10px;
border-top: 1px solid #162581;
color: #092755;}
#nav ul li {display: inline;
list-style-type: none;}
#nav ul {margin: 4px 0;}
#content {position: relative;
float: left;
width: 954px;
background: url(../images/leftnav_bkgd.gif) repeat-y;
border-top: 1px solid #162581;}
#rightcolumn {
position:relative;
float: right;
width: 282px;
background: url(../images/sidecol-rpt.gif) repeat-y;
}
.clear {clear: both;}
#right {float: right;
margin-left: 0;}
#leftnav {float: left;
width: 175px;
margin-left: 0px;
/* background-color: #f6f6ed; */
background-color: #f6f6e2;}
#leftnav ul {list-style-type: none;
margin-top: 10px;
margin-left: 0px;
padding-left: 0;}
#leftnav a {display: block;
width: 161px;
padding: 3px 7px;}
#leftnav a:hover {background: #bab193;
text-decoration: none;
color: #092755;}
#textualcontent ul.notype {list-style-type: none;
padding-left: 0;
margin: 0 0 7px;}
#textualcontent {float: left;
width: 467px;
padding: 10px 15px;}
#textualcontent ul, #twocolcontent ul {list-style-type: square;
padding-left: 15px;
margin: 0;}
#twocolcontent {float: left;
width: 749px;
padding: 10px 15px;}
#twocolcontent h1 {font-size: 11px;}
#photo {float: left;}
#rightcolphoto {float: left;
vertical-align: bottom;
}
#banner {position: absolute;
left: 0;
top: 234px;}
#footer {
clear: left;
width: 934px;
height: 18px;
border-top: 1px solid #162581;
border-bottom: 1px solid #162581;
font-size: 10px;
margin-bottom: 15px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
#footer li {display: inline;
list-style-type: none;}
#footer ul {margin: 0;
float: right;
clear: left;}
anyone have any suggestions? i've tried a number of things, but with no luck.
So (most likely) the image IS going all the way to the bottom of the div, but the column is not going all the way to the bottom of the page or parent div.
That may not be your problem, but it is the most common that I have seen.
