468,133 Members | 1,420 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,133 developers. It's quick & easy.

problem positioning of a background image in a DIV

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

Nov 6 '08 #1
0 2510

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Bryan R. Meyer | last post: by
2 posts views Thread by Dariusz | last post: by
2 posts views Thread by Sebastian Stein | last post: by
6 posts views Thread by | last post: by
1 post views Thread by sweep | last post: by
2 posts views Thread by TheCruelPanda | last post: by
27 posts views Thread by didacticone | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.