Solved: top banner stretch

Duckman69 · 17-Aug-2007, 10:53 PM #1

m trying to stretch a image for the top of my page here is a code i saw on another page that was working but i cant get it to work for me and i cut / paste it, so i cant figure this out... heres the code i used... im confused why its a background = when its only the top background on his page... i just wanted this to be the top banner of my page and have it stretch acording to the viewers screen size, any help would be great...

<tr class=td2><td class=td2;align="center" colspan="2">

<table border="0" cellspacing="1" width="100%">
<tr>
<td width="100%" background="banner-top.JPG">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bordercolor="#FFFFFF">
<tr>
<td width="100%" background="banner-top.JPG" height="80">
<p align="center"><font color="#FFFFFF" size="3" face="Arial"><b>

</b></font></td>
<font></td>

drdrew1469 · 17-Aug-2007, 11:46 PM #2

i'm not trying to be mean, but that is some jacked up code, no wonder it won't work! why on earth are there 3 (or more) nested tables for a banner!? ps, check your other threads please...namenotfound answered you earlier and you're still reposting the same invalid code...

Quote:

Originally Posted by Duckman69

<table> (i assume)

<tr class=td2><td class=td2;align="center" colspan="2">

<table border="0" cellspacing="1" width="100%">
<tr>
<td width="100%" background="banner-top.JPG">
<table border="0" cellpadding="0" cellspacing="0" width="100%" bordercolor="#FFFFFF">
<tr>
<td width="100%" background="banner-top.JPG" height="80">
<p align="center"><font color="#FFFFFF" size="3" face="Arial"><b>

</b></font></td>
<font></td>

Duckman69 · 18-Aug-2007, 12:04 AM #3

didnt even realize i posted 2x sorry, thanks though...

Duckman69 · 18-Aug-2007, 12:06 AM #4

<center>
<img src = "Best-1.gif" style="position: absolute; top: 70px; left: 275px; ">
<img src="banner-top.JPG" width="100%" height="150" />
</center>

i didnt see his post but this worked for me so im happy with that ... i just dont get why it didnt work before being as width =100% i thought that was the key... turns out it was... im just stumped as to why before it didnt work... o well

tomdkat · 18-Aug-2007, 01:02 AM #5

Quote:

Originally Posted by Duckman69

This sets the background of the table cell to be the image, not the entire page background.

EDIT: Here is the HTML you want:

Code:

<table style="width: 100%;" border="2"
 bordercolor="lawngreen" cellpadding="12" cellspacing="2">
  <tbody>
    <tr class="td2">
      <td
 style="text-align: center; background-image: url(banner-top.jpg); background-repeat: no-repeat; background-position: center; height: 150px;" class="td2" colspan="2">
      <img style="width: 481px; height: 65px;"
 src="Best-1.gif">
      </td>

Peace...

Duckman69 · 19-Aug-2007, 06:18 AM #6

thanks again tomdcat i got it working but with different code always good to have some posts to reference back to though if i ever have issues...

Duckman69 · 19-Aug-2007, 06:51 AM #7

code from tomdcats other post for future reference below (works) ::

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>stretch</title>
</head>
<body>
<table style="width: 100%; text-align: left;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="height: 150px; width: 100%; text-align: left; vertical-align: top;">
<img style="width: 100%; height: 100%;" alt="Background image"
src="banner-top.jpg"><br>
<div style="display: block; z-index: 3; margin-top: -110px; text-align: center;">
<img style="width: 481px; height: 65px;" alt="Foreground image"
src="Best-1.gif"><br>
</div>
</td>
</tr>
<tr>
<td style="height: 300px;">Here is some text</td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

Duckman69 · 19-Aug-2007, 09:14 AM #8

the code i used is below and works very good... although the code posted above this topic which is tomdcat 's code... also works very well...

<center>
<div style="height:150px;overflow:hidden;">
<img src="best-top-background.JPG" width="100%" height="150" /><br />
<img src = "Best-1.gif" style="position:relative;top:-110px;left:0px;">

</center>
i dont think center is even needed i just havent refined my pages properly yet...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)