kurios Posted June 28, 2010 Posted June 28, 2010 Hello! For some reason I can only find threads about graphical borders around infoboxes but nothing on graphics around the entire shop. I'm using a fixed width shop and i'd like to have rounded corners on the footer and header and a shadowy effect along the sides of my shop, I also like the background to be gradient from dark to light. The best i've come up with is a big background image but; A it makes for one hell of an image and B the height differs on different pages so the corners are impossible to align. Thank you in advance.
Guest Posted June 29, 2010 Posted June 29, 2010 Hello Kire, To accomplish what you want, you would need to create the images to use as separate backgrounds for the header, the body and the footer. Then call the images using css in stylesheet.css. Example of the css for the header: table.header { background-image: url(images/back-top-white.gif); height: 120px; } Example of the css for the body: #CONTAINER { width: 900; margin: auto; margin-right: auto; border: 0px solid #000000; background-image: url(images/back-white-wrapper.gif); text-align:center; } Example of the css for the footer: TD.footer { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-image: url(images/bg-footer.gif); color: #FFFFFF; font-weight: bold; height: 25px; } Hope this helps you. - Hal
kurios Posted June 30, 2010 Author Posted June 30, 2010 Hello Kire, To accomplish what you want, you would need to create the images to use as separate backgrounds for the header, the body and the footer. Then call the images using css in stylesheet.css. Example of the css for the header: table.header { background-image: url(images/back-top-white.gif); height: 120px; } Example of the css for the body: #CONTAINER { width: 900; margin: auto; margin-right: auto; border: 0px solid #000000; background-image: url(images/back-white-wrapper.gif); text-align:center; } Example of the css for the footer: TD.footer { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-image: url(images/bg-footer.gif); color: #FFFFFF; font-weight: bold; height: 25px; } Hope this helps you. - Hal It did indeed help me! You're a God among men :) Thank you very much
Recommended Posts
Archived
This topic is now archived and is closed to further replies.