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>
