View Full Version : CSS: Need to extend wrap background to top and bottom of page?

Well Fed
09-03-2010, 09:54 AM
Hi everyone!

I'm having a bit of trouble with my webpage:


I would like the white background of my wrap in the middle there to extend to the top of the page...and also to the bottom of the page, without the need for content to push it down.

Thanx in advance for your help...


09-03-2010, 10:19 AM
height: 100%;
html {
font-size: 100%;
/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
margin-bottom: 1px;

body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #536482;
background-color: #282b54;
background-image: url("http://www.wellfedproductions.com/images/bluebackground.jpg");
background-position: top center;
background-repeat: repeat;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
margin: 0;
/*padding:12px 0;*/

/* Main blocks
---------------------------------------- */
#wrap {
background-color: #FFFFFF;
padding: 0 20px;
min-width: 850px;
width: 850px;
margin: 0 auto;
/* hack for IE6 */
height:auto !important;

Well Fed
09-03-2010, 10:26 AM
Woah...that was fast!

Thank you so much...only thing is, I do want a 12px gap up the top there...


Well Fed
09-03-2010, 11:08 AM
Also, it seems to have cut off the rounded corners on the top of that header?

09-03-2010, 11:21 AM
Add some padding-top to#wrap

Well Fed
09-03-2010, 11:25 AM
Ok, yes, I have done that...added some padding at the top of the wrap...but:

it seems to have cut off the rounded corners on the top of that header?

I have some code in there that is supposed to round the corners of the top of the header...like this:


Something in the new code has stopped that from working...


Well Fed
09-04-2010, 01:53 AM
Hello...can anyone pls help?