PDA

View Full Version : How to repeat a background gradient?


Chris 96 WS6
03-12-2006, 07:27 PM
I have a centered banner header at http://www.5thgen.org

Anybody know what HTML I would use to display a repeating background gradient behind the banner so that it looks solid all the way across?

I have the gradient image already.

Adrian Schneider
03-12-2006, 07:37 PM
style="background: url('/path/to/image.gif') repeat-x; width: 100%;"

Chris 96 WS6
03-12-2006, 07:55 PM
What am I doing wrong?

header template:

<!-- logo -->
<a name="top"></a>
<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" class="fluidheader" style="border: #000000 0px solid;"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><center><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></center></a></td>
</tr>
</table>
<!-- /logo -->

added to css:

/* ***** for the repeating banner background ***** */
.fluidheader {
background: url('/images/misc/5thgenlogogradient.gif') repeat-x;
}

Adrian Schneider
03-12-2006, 08:00 PM
Try something like this:

<div align="center" class="fluidheader">
<a href="index.php"><img src="http://www.5thgen.org/forum/images/misc/5thgenlogo.gif" border="0" alt="5thgen.org Camaro Forums" /></a>
</div>

.fluidheader {
width: 100%;
background: url('/forum/images/misc/5thgenlogogradient.gif') repeat-x;
}

I also noticed your repeating gradient doesn't exist... that is probably the reason! (check path)

Chris 96 WS6
03-12-2006, 08:18 PM
Got it! Thanks.

it was looking for the /forum on the front of the path in the CSS piece.