View Full Version : Background black if page is long ... can;t figure out how to fix!

Mar 4th, 2010, 11:12 PM
Hi there, Hoping you can help me... Please and thank you :)

I am building a website (html & css) and when the page goes longer than normal (text) I am getting a BLACK bar appear towards the end... as if one of my images is not auto stretching or bg colour is not staying white... I can't out what has gone wrong!!!

Look here: http://crisscross.ca/soltoro/elrayo.html

I think it is this part of the css that is causing problem...

.tail-bottom { background:url(images/tailbottom.gif) left bottom repeat-x;}

beginning of css:

* {
html, body { height:100%; background-color:#FFFFFF;}
html { background:url(images/tailcenter.gif) center top repeat-y #ffffff;}
body {
background:url(images/mainbg.jpg) no-repeat center top #ffffff;
font-family:Arial, Helvetica, sans-serif;
text-align: left;

input, select, textarea { font-family:Arial, Helvetica, sans-serif; font-size:1em;}

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper { width:100%; overflow:hidden;}
.container { width:100%;}

p {

.tail-bottom { background:url(images/tailbottom.gif) left bottom repeat-x;}

Mar 4th, 2010, 11:21 PM
Hello conception,
Your image http://crisscross.ca/soltoro/images/tailcenter.gif has black sides.
See http://crisscross.ca/soltoro/images/tailcenter.gif

Comment that out and see if your black bar disapears like this -

html {
/*background:url(images/tailcenter.gif) center top repeat-y #ffffff;*/
background: #fff;

Mar 4th, 2010, 11:31 PM
Something so small I completely over looked.... THANK YOU!!!
too many hours behind this screen looking at code.. hahah