Hi,
I have an Image which is dark grey/black, at the top a white line, at the
left site a white line as well.
At 192 px from the left of the screen I position a DIV with this image as
the background image. In the code I've added a multi line textbox (in my
real world it is a treeview). It is placed that I would have to scroll to
see the entire textbox. What happens is that the image will repeat itself,
this is what you expect. Because of the white line, it doesnot look nice.
But we can modify the style !!! So I change the original code:
<body id="doc"<form id="form1" runat="server">
<div id="grdWithScroll" style="z-index: 105; left: 192px;
overflow: scroll; width: 250px; position: absolute; top: 96px;
height: 480px; border-right:
1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid;
background-image: url(Images/Vlakmidden_tonv1.png); ">
<asp:TextBox ID="TextBox1" runat="server" Height="448px"
Style="z-index: 100; left: 24px;
position: absolute; top: 392px" TextMode="MultiLine"
Width="120px"></asp:TextBox>
</div>
</form>
</body>
background-image: url(Images/Vlakmidden_tonv1.png); background-attachment:
fixed;"
the background-attachment: fixed;" is added.
What you expect is that there will be no scrolling of the image, so no
horizontal white line in the div area. This is true, but the image is placed
at the left =0, so in the middle of the area I now got a vertical white
line.
This is strange behavior.
The source of the website is:
<!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><title></title></head>
<body id="doc"<form name="form1" method="post" action="Default.aspx"
id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTIwNzM2Mzc2OTBkZJsn85KnroSX4RS2imveBktL4rI 6" />
</div>
<div id="grdWithScroll" style="z-index: 105; left: 192px;
overflow: scroll; width: 250px; position: absolute; top: 96px;
height: 480px; border-right:
1px solid; border-top: 1px solid; border-left: 1px solid;
border-bottom: 1px solid;
background-image: url(Images/Vlakmidden_tonv1.png);
background-attachment: fixed;">
<textarea name="TextBox1" rows="2" cols="20" id="TextBox1"
style="height:448px;width:120px;z-index: 100; left: 24px;
position: absolute; top: 392px"></textarea>
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAgLI5PGyDQLs0bLrBtGslYXMGixz03JmU16KAFcOkCIp" />
</div></form>
</body>
