problem positioning of a background image in a DIV

Discussion in 'ASP .Net' started by ton, Nov 6, 2008.

  1. ton

    ton Guest

    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>
     
    ton, Nov 6, 2008
    #1
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    6
    Views:
    338
  2. jc
    Replies:
    3
    Views:
    1,733
  3. jc
    Replies:
    1
    Views:
    1,371
    Neredbojias
    Mar 19, 2008
  4. Jeff
    Replies:
    3
    Views:
    363
    Scott M.
    Mar 18, 2009
  5. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    753
Loading...

Share This Page