locked
background image is not filling page in form asp net c# RRS feed

  • Question

  • User-605499000 posted

    I have tried everything and no luck. I have a background image and I want it to cover the whole page. Right now it is not going up to the top and if is not filling the page or being responsive.  Also can not put the nav menu on top of it or other images.  I am using asp.net 4.5 web forms with a master page. I also have bootstrap.css and I started a new bootsrap addon.css where I put the css.  The bootstrap.css has everything on it.  I tried doing a boostrap background image and that also did not work.

    Here is my code first bootstapaddon.css the logo needs to go onto of the background image. Right now the background picture is using the size of the png image.

    body {
    background-image: url(Images/background1.png);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    }
    img-responsive {
    display: inline-block;
    max-width: 100%;
    height: auto;
    }

    #logo {
    display: block;
    ;
    left: 0px;
    top: 18px;
    width: 199px;
    height: 107px;
    background-image: url('Images/Logo.png');
    background-repeat: no-repeat;
    }

    html

    <div class="container">
    <a runat="server" href= "~/">
    <asp:Image ID="Image1" runat="server"
    ImageUrl= "~/Images/Background1.png"/>
    </a>
    </div>
    <div ="TitleContent" style ="top:100px ">
    <a runat="server" href= "~/">
    <asp:Image ID="Image2" runat="server"
    ImageUrl= "~/Images/Logo.png"/>
    </a>
    </div>

    I hope some one can help me I have tried everything.

    thanks

    Jen

    Monday, October 8, 2018 10:32 PM

All replies

  • User-893317190 posted

    Hi bumples18,

    If you want to make the background image full of the page and the logo stay in the upper left corner.You could try the code below.

    <head runat="server">
        <title></title>
        <style>
    
            body {
                background-image: url('Images/background1.png');
                background-size: 100% 100%;
                
                background-attachment: fixed;
            }
    
        </style>
          
    </head>
    <body>
        <form id="form1" runat="server">
          
    <asp:Image ID="logo" runat="server"
    ImageUrl= "~/Images/Logo.png" Style=";top:18px;left:0;"  /> 
    
        </form>

    I use my image to make a test and the result.

    Best regards,

    Ackerly Xu

    Tuesday, October 9, 2018 8:06 AM
  • User-1387528790 posted

    first you tell where you want to give background image on site master page or other page

    Tuesday, October 9, 2018 9:47 AM
  • User-605499000 posted

    Thank you for your response and I tried what you sent and it did not work. Yes I am using site master.  I think some code maybe in bootstrap css that is keeping me from going up to where the navigation area is.  I am going to break up the image and try to put one in the navigation area today. maybe try bootstraps row and column.

    Thanks and if you have any other advice would love to hear it.

    Jen

    Tuesday, October 9, 2018 3:32 PM
  • User753101303 posted

    Hi,

    What if you try https://css-tricks.com/perfect-full-page-background-image/ ? (ie prefer the use of "html" which should be already your "viewport" on the scrollable document body rather than trying to tweak the "body" element).

    Tuesday, October 9, 2018 5:03 PM
  • User-1387528790 posted
    Ok
    Have you do any changes in properties window .
    In style you can set margin or padding for that perticular page
    Look on that
    Thursday, October 11, 2018 4:02 PM