I'm trying to make a dynamically sizable title banner, using fairly simple image tricks. I place the banner image in a table cell, and set the background-image of the table row to a one-pixel-wide repeat of the banner's right-most
pixel column. Thus, the banner image appears to stretch to fit the screen width without stretching the logo. The code below is my entire page so far, and the problem is shown in a red circle in the screenshot. This is the transition where the main image ends and the one-pixel-wide background image begins.
It appears that the one-pixel-wide bar at the end is compressed by
one pixel - making the tops align properly, while the bottoms are
one pixel off. I should add that I have checked the images more than once to make cure they the image data is correct. They are %100 accurate as far as MSPaint is concerned.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body bgcolor="#000000">
<form id="form1" runat="server">
<div>
<table style="width:100%; ">
<tr style="background-image: url('Images/Banners/WebBannerWideBar.png')">
<!--WebBannerWideBar is 1x100 px-->
<td>
<img alt="Angry Octopus"
src="Images/Banners/WebBannerWide.png" />
<!--WebBannerWide is 760x100 px-->
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
