Hello, I have created a wire frame in PS and am now cutting it to html. There is a gradient background 1 pixel wide that is applied to the body element of the document. There is also a header, footer, and main content area slices that all have a drop shadow that fades into the background image. The header and footer look fine, but the content area is presenting an issue.
The body element has a 1px wide gradient that is 200px tall that fades into the background color of the element. The header looks fine, as it was cut from the wire frame and the drop shadow and background line up correctly. The footer as well looks fine, as it is outside of the height of the background image. The height of the body background image is greater then the height of the header background image. The content selector contains the remainder of the transition. This overlap is say 200px and can set the element's height applying the background image as such. Once content grows past this area I do not know how to apply a slice to this area. Maybe there is a simpler way to go about this, thank you for any insight. * { color: #000; margin: 0px; padding: 0px; } body { background-color: #e8e8e8; background-image: url('../../PresentationLayer/Template/Images/background-gray-sliver.gif'); background-repeat: repeat-x; font-family: Arial, Verdana, Tahoma; font-size: .82em; margin-top: 0px; width: 100%; } div#container { margin: auto; width: 800px; } div#header { background-image: url('../../PresentationLayer/Template/Images/background-header.gif'); background-repeat: no-repeat; height: 128px; width: 800px; } div#content { background-image: url('../../PresentationLayer/Template/Images/background-content.gif'); height: auto; min-height: 200px; width: 800px; } div#footer { background-image: url('../../PresentationLayer/Template/Images/background-footer.gif'); background-repeat: no-repeat; height: 128px; width: 800px; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Title goes here</title> </head> <body> <form id="form1" runat="server"> <!-- container --> <div id="container"> <!-- header --> <div id="header"> <h1>header goes here</h1> </div> <!-- content --> <div id="content"> <p>content goes here</p> </div> <!-- footer --> <div id="footer"> <p>footer</p> </div> </div> </form> </body> </html> ____________________________________________________________________________________ No need to miss a message. Get email on-the-go with Yahoo! Mail for Mobile. Get started. http://mobile.yahoo.com/mail ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/