Welcome to WebmasterWorld Guest from 35.171.45.91

Forum Moderators: not2easy

Message Too Old, No Replies

repeating background

     
3:45 pm on Jul 1, 2005 (gmt 0)

Full Member

10+ Year Member

joined:Mar 27, 2004
posts:276
votes: 0


I have a background that is set into three sections. The main one does not repeat and it looks fine the one on the left repeats down the left side to act as an expander for page length, the third is suppose to repeat accross the top to act as a filler to compansate for monitor size. I can not seem to get the top filler to work as i want it
here is the codinf I am using
Pat
##############################
html, body {margin:0; padding:0%; height:98%;}
body {
font-family: verdana, sans-serif Arial; font-size: 16px;
background-image: url(../images/leftsliver.jpg); background-repeat: repeat-y; transparent;
}
#header {
height: 235px;
background-image: url(../images/headsliver.jpg); background-repeat: repeat-x; #FFFFFF;
background: transparent;
color: #ee8;
}
#content {
position:relative;
height:100%;
min-height:100%;
background-image: url(../images/trixieheader.jpg); background-repeat: no-repeat; #FFFFFF;
border-right:none;
margin-top: 0;
margin-bottom:-80px;
}
* html #content {height:100%}
body>#content {height:auto}
#contentinner {margin-left:18%; width:80%;}
* html #contentinner {height:1%}/* combat ie 3 pixel jog */
html>body #content{height:auto}
###########################
Can anyone offer any suggestions on why this is not repeating across the top as i would want it to
7:56 pm on July 1, 2005 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 25, 2003
posts:1350
votes: 442


By having background: transparent; follow your background image declaration in #header it effectively replaces it. Comment out the transparent declaration to see what I mean.

The reason the <body> y-background shows is because of an apparent coding error:
background-image: url(bg.gif); background-repeat: repeat-y; transparent; - transparent; by itself is meaningless and so is ignored.

I am not sure what you are attempting but a background can be either a declared colour/image for that container or transparent (allowing the underlying parent container colour/image show through. It can't be both.