Background image Image wont stretch down....

[BigKingy]

Here: http://www.stanmore.ac.uk/images/nav/tableless4a.html

I want the picture of the students in the top left to stretch down to the blue bar at the bottom of the picture.

I have a feeling the address line could be messing it up, although i could be wrong.

Heres the CSS:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
font-size: 100%;
letter-spacing: 1px;
text-align: left;
background: #FCFCFC;
}

#outer{
min-height:100%;
margin-bottom:-44px;
height:auto;
}
* html #outer{height:100%;}
#footer {
width:100%;
clear:both;
height:30px;
margin-top:0px;
margin-bottom:0px;
padding-top:3px;
color: #FFFFFF;
background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
text-align: right;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 70%;
border-top: 10px solid #6699FF;
}
div#footer a:link {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
div#footer a:visited {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
div#footer a:active {
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#footer a:hover {
font-weight: bold;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
#clearfooter{clear:both;height:30px;}
div p {margin-top:14px}
#minHeight{float:left;width:0px;height:100%;margin-bottom:-32px;} /*safari wrapper thanks

to Tim Connor*/* html #minHeight{margin-bottom:-30px;}
div#menu {
background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
padding: 0px;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
text-align: left;
border-top: 2px solid #999999;
border-bottom: 2px solid #222222;
}
div#menulinks img {
vertical-align: middle
}
div#menulinks {
line-height:25px;
padding-top: 0.2em;
padding-bottom: 0.2em;
width: 100%;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 86%;
font-weight: bold;
color: #6699FF;
letter-spacing: -0.5px;
}
div#menulinks a:link {
color: #6699FF;
text-decoration: none;
}
div#menulinks a:visited {
color: #6699FF;
text-decoration: none;
}
div#menulinks a:active {
text-decoration: none;
border-bottom: 2px solid #6699FF;
}
div#menulinks a:hover {
text-decoration: none;
border-bottom: 2px solid #6699FF;
}
div#menulinks a:focus {
text-decoration: none;
border-bottom: 2px solid #6699FF;
}

abbr {
cursor:help;
border-bottom:1px dotted #FFFFFF;
}

img {
border: none;
}

img.b23070 {
width: 15em;
height: 4.6em;
}

div#header {
width: 100%;
height: 5.5em;
text-align: right;
background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
position:relative;
}

div#header img {
position:absolute;
top:0px;
right:0px;
}

div#header span {
font-size: 67%;
font-weight: bold;
color: #FCFCFC;
position:absolute;
bottom:0;
right:0;
padding-bottom: 2px;
}

div#toplinks {

height: 5.5em;
left: 0px;
top: 0px;
text-align: left;
background: url(http://www.stanmore.ac.uk/images/nav...r_students.jpg);
background-repeat: no-repeat;
font-size: 76%;
font-weight: bold;
color: #FCFCFC;
}
div#toplinks a:link {
color: #FCFCFC;
text-decoration: none;
}
div#toplinks a:visited {
color: #FCFCFC;
text-decoration: none;
}
div#toplinks a:active {
color: #FCFCFC;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#toplinks a:hover {
color: #FCFCFC;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#toplinks a:focus {
color: #FCFCFC;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
form {
padding: 0px;
margin: 0px;
}
div#search {
width: 100%;
height: 1.8em;
line-height:24px;
padding-top: 0.2em;
background: #6699FF url(http://www.stanmore.ac.uk/images/nav/searchbg.jpg) repeat-x ;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 88%;
text-align: right;
font-weight: bold;
color: #FFFFFF;
}

#searchlinks {
float:left;
padding-top: 0.1em;
font-weight: bold;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 95%;
text-align: left;
}

#searchlinks span {
border-bottom: 1px solid #FFFFFF;
}

#searchlinks a:link {
color: #FFFFFF;
text-decoration: none;
}
#searchlinks a:visited {
color: #FFFFFF;
text-decoration: none;
}
div#searchlinks a:active {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#searchlinks a:hover {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#searchlinks a:focus {
color: #FFFFFF;
text-decoration: none;
border-bottom: 1px solid #FFFFFF;
}
div#cookiecrumbs {
width: 100%;
height: 1.4em;
background: #FFFFFF url(http://www.stanmore.ac.uk/images/nav/ccbg.jpg);
padding-top: 2px;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 75%;
font-weight: bold;
text-align: left;
color: #686868;
border-top: 1px solid #777777;
border-bottom: 1px solid #FFFFFF;
}
div#cookiecrumbs a:link {
color: #6699FF;
text-decoration: none;
}
div#cookiecrumbs a:visited {
color: #6699FF;
text-decoration: none;
}
div#cookiecrumbs a:active {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#cookiecrumbs a:hover {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#cookiecrumbs a:focus {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#titletext {
text-align: left;
font-size: 70px;
color: #639EFF;
letter-spacing: -4px;
}

div#sublinks {
position: relative;
left: 0px;
top: -10px;
font-family: Arial, Helvetica, Verdana, Tahoma, sans-serif;
font-size: 75%;
color: #686868;
letter-spacing: -0.5px;
}

div#sublinks a:link {
color: #6699FF;
text-decoration: none;
}
div#sublinks a:visited {
color: #6699FF;
text-decoration: none;
}
div#sublinks a:active {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#sublinks a:hover {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#sublinks a:focus {
color: #6699FF;
text-decoration: none;
border-bottom: 1px solid #6699FF;
}
div#sublinks span{
color: #183788;
font-weight: bold;
}
div#content {
width: 100%;
}

div#mainpics {
position: relative;
top: 5px;
margin-left: 20px;
width: 200px;
height: 150px;

}

div#maintext {
position: relative;
top: -165px;
margin-left: 240px;
text-align: left;
font-size: 82%;
color: #183788;
padding: 4px;
background: url(http://www.stanmore.ac.uk/images/nav/arrowbg.gif) right top;
background-repeat: no-repeat;
}

Any ideas? Any help would be greatfully appriciated

[7stud]

Hi,

Instead of making the image of the students a background-image, you could use img tags and use:

position: absolute:

on the img tag, and for the address a margin-right slightly bigger than the image width.

Or, you could use:

float: left;

on the img tag, and for the address a margin-top slightly less than the image height.

Then, since the image in the upper right of the college name is a link, I think you have to deal with it separately.

[BigKingy]

Hi thanks for replying,

Could you explain a little more what you mean?

Cheers

[Paul O'B]

Hi,

Just take the break out of the top links and set the height for the toplinks and take the height out of header.

div#header { 
width: 100%;
text-align: right;
background: #183788 url(http://www.stanmore.ac.uk/images/nav/headerbg.jpg);
position:relative;
}
 
div#toplinks {
height: 7.5em;
left: 0px;
top: 0px; 
text-align: left;
background: url(http://www.stanmore.ac.uk/images/nav...r_students.jpg);
background-repeat: no-repeat;
font-size: 76%;
font-weight: bold;
color: #FCFCFC;
}

	<div id="toplinks">&nbsp;[&nbsp;<a href="http://www.stanmore.ac.uk/accessibility/" accesskey="a" tabindex="2">Accessibility 
	  Options</a>&nbsp;]</div>
	<a href="http://www.stanmore.ac.uk/" tabindex="11"><img class="b23070" src="http://www.stanmore.ac.uk/images/nav/logo.gif" alt="Stanmore College Further Education Corporation"></a>
	<span>Stanmore College, Elm Park, Stanmore, Middlesex, HA7 4BQ&nbsp;&nbsp;&nbsp;<abbr title="Telephone">Tel.</abbr> 
	020 8420 7700 &nbsp;&nbsp;Minicom. 020 8420 7803&nbsp;&nbsp;</span></div>

I think thats what you want

paul

[BigKingy]

As always, you are correct Paul.

Cheers matey.

Really appriciate it