Dynamic page BG height

[Fmdpa]

Too often I'm either looking up fancy adjectives to lengthen page content, or I'm making the font-size 5px to fit everything. How do you make the page BG match the amount of content on the page? My current BG image consists of a header, black blank space, then a footer and a border around all three elements.

[Synook]

You split it up, then make the backgrounds that should expand repeat-y.

[Fmdpa]

Then could I make a border around all three images? Another issue I'm having is that if I define a page height in the external stylesheet, then it is stuck at that height (unless I use the !important method). Or will it expand automatically (if repeat-y is set) as the content is added?

[Synook]

Why are you defining a page height?Have a look at the code behind this page: http://lab.aspektas.com/rdtech/index.php.

[Fmdpa]

Because the content on my page is > 100% height. Won't it cut off the content past the bottom of the page?

[Fmdpa]

Maybe I should just ask how would you make a page that has many paragraphs (e.g. 200% height), and there are three images on the page, a head, a body and a foot. The body is just a thin line of solid color that repeats-y.

[Synook]

Do you have an example of what you have tried so far? By default, elements will expand to accommodate their content.

[Fmdpa]

After a little trial/error I came up with this solution:

body {				background-color:#000; color:#ffffff; font-size:100%;} div#head {				background: url('SRC/header.jpg') no-repeat center top;				margin:0 auto;				height:352px;				width:960px;				border-left:2px solid #333;				border-top:2px solid #333;				border-right:2px solid #333;} div#container{				background: url('SRC/body.jpg') repeat-y center top;				color:#fff;				width:840px;				margin:0 auto;				padding-right:70px;				padding-left:50px;				padding-top:0px;				padding-bottom:50px;				top:-30px;				position:relative;				border-left:2px solid #333;				border-right:2px solid #333;} div#foot {				background: url('SRC/bottom.jpg') no-repeat center bottom;				position:relative;				width:960px;				height:515px;				margin:0 auto;				bottom:80px;				border-left:2px solid #333;				border-bottom:2px solid #333;				border-right:2px solid #333;}

Is there a more efficient way to do any of this?