You need to give the background image a width and height inorder for it to show. A div by itself is empty. even with a background image and color. unless you put the image directly in the div with the <img> tag. it won't show up without the width and height
1 - clear your floats in your maincontent div (add an empty div after the content and sidecontent divs with the clear:both CSS attribute) 2 - remove the height and min-height from the maincontent div -- these are not needed after you clear the floats
I had to add some extra content to the content section to test it to make it expand beyond the height of your background image, but this worked for me.
google for the contact form for wordpress. there is a really cool plugin that you can install. then on the page you want to use the form you just do something like this
Site: http://www.brianfarris.net
CSS:
#wrapper {margin: 0 auto; width:1000px;}
#header {background-image:url(/images/header.png);}
#headerinfo {float:left;}
#headersearch {float:right; margin: 150px 30px 0 0;}
#maincontent {background-image:url(/images/content.png); background-position: center top; background-repeat:repeat-y; margin-bottom:80px;}
#content {width:600px; float:left; margin-left:115px;}
#sidecontent {width:250px; float:right;}
#footer {background-image:url(/images/footer.png); clear:both;}
#footercontent {width:900px; margin-left:115px;}
Thanks.
http://www.brianfarris.net
CSS:
#wrapper {margin: 0 auto; width:1000px;}
#header {background-image:url(/images/header.png); width:1000px; height: 185px; min-height:185px;}
#headerinfo {float:left;}
#headersearch {float:right; margin: 150px 30px 0 0;}
#maincontent {background-image:url(/images/content.png); background-repeat:repeat-y; margin-bottom:80px; width:1000px; height:421px; min-height:421px;}
#content {width:600px; float:left; margin-left:115px;}
#sidecontent {width:250px; float:right;}
#footer {background-image:url(/images/footer.png); clear:both; width:1000px; height:102px; min-height:102px;}
#footercontent {width:900px; margin-left:115px;}
1 - clear your floats in your maincontent div (add an empty div after the content and sidecontent divs with the clear:both CSS attribute)
2 - remove the height and min-height from the maincontent div -- these are not needed after you clear the floats
I had to add some extra content to the content section to test it to make it expand beyond the height of your background image, but this worked for me.
You have this
this looks bad background-image:url(/images/content.png); background-repeat:repeat-y;
I think it should be background-image:url(images/content.png) repeat-y;
[CONTACTFORM]
It works really well.
check it out
http://wilsonwrites.com/?page_id=18