Why won't my images align properly?
Posted
on Stack Overflow
See other posts from Stack Overflow
Published on 2009-08-06T21:18:40Z
Indexed on
2010/05/09
5:28 UTC
Read the original article
Hit count: 163
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>
© Stack Overflow or respective owner
