problem positioning of a background image in a DIV

T

ton

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="/wEPDwULLTIwNzM2Mzc2OTBkZJsn85KnroSX4RS2imveBktL4rI6" />
</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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,901
Latest member
Noble71S45

Latest Threads

Top