Mon, 2010-02-15 03:09
I am trying to create a layout from a psd sliced and saved. I have saved all the slices and created the layout however, my content container background image is 450px tall. my content only uses maybe 250 of those pixels. How would I resize the background to whatever the content size may be at any given time?
Do I really have to use java script?
Thank in advance for any help you offer.
James
*{ margin: 0; padding: 0; } body { background-color: #000000; color: white; font-size: 100%; width: 1024px; margin: auto; } a { text-decoration: none; color: white; } li { list-style: none; } a:hover { text-decoration: underline; color: white; } #banner { background: url(images/banner.png) no-repeat; width:882px; height: 146px; margin-left: 72px; } #nav { background: url(images/nav.png) no-repeat; width: 882px; height: 48px; overflow: hidden; margin-left: 72px; } #nav ul { padding-left: 245px; } #nav li { float: left; line-height: 48px; } #nav li a { padding: 0 1em; } #nav li a.first { padding: 0; } <----------This is in question----------> #content { background: url(images/content.png) ; width: 882px; color: white; margin-left: 72px; } <----------End Question----------> #main { text-align: center; padding-left: 72px; padding-right: 72px; width: 739px; } #main h1 { padding-top: 20px; padding-right: 15px; padding-left: 0px; } #main p { padding-top: 15px; } #footer_spacer { background: url(images/footer_spacer.png) no repeate; width: 882px; height: 11px; } #footer { background: url(images/footer.png) no-repeat; width: 882px; height: 54px; line_height: 54px; margin-left: 72px; }