locked
Problems displaying a full page fixed background image in Web Forms with VS2010 RRS feed

  • Question

  • User2103134756 posted

    Having problems displaying a full screen fixed image background in a Web Form. I've seen several issues on this but none seem to work. On my master page, I have made the first <div> after the form have an id="container" because the nav menu at the top and the image are consistent for each page. Just to check I put a label and a textbox on the form inheriting the master. The nav menu on the master and the controls on the .aspx file show up but no image. Tried it with and without the master and with both 2010 and 2017 Community. Tried the CSS in the container div and in the html selector. Here is the CSS and Master Page code. I have also tried this outside of the IDE with an HTML page and still no go.

    ---CSS
    
    html
    {
    background: url("../Images/background_image.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;

    }

    body { background-color: #000000; margin: 0px; padding: 0px; font-family: Helvitica, Verdana, Arial, Sans-Serif; font-size: 100%; } nav#mainNav { width: 100%; border-bottom: 2px solid #dddddd; background-color: #000000; } #mainMenu { list-style: none; margin: 0; padding: 0; text-align: center; } #mainMenu li { display: inline; } #mainMenu a { display: inline-block; padding: 10px; text-decoration: none; color: #dddddd; } #mainMenu a:hover { color: #ffffff; } ----Master Page <body> <form id="form1" runat="server"> <div id="containter"> <nav id="mainNav"> <ul id="mainMenu"> <asp:LinkButton ID="lbHome" runat="server">Sean</asp:LinkButton> <asp:LinkButton ID="lbAbout" runat="server">About</asp:LinkButton> <asp:LinkButton ID="lbSchedule" runat="server">Schedule</asp:LinkButton> <asp:LinkButton ID="lbMusic" runat="server">Music</asp:LinkButton> <asp:LinkButton ID="lbTexasGold" runat="server">Texas Gold</asp:LinkButton> <asp:LinkButton ID="lbCelticTexas" runat="server">Celtic Texas</asp:LinkButton> <asp:LinkButton ID="lbGallery" runat="server">Gallery</asp:LinkButton> <asp:LinkButton ID="lbRegister" runat="server">Register</asp:LinkButton> <asp:LinkButton ID="lbStore" runat="server">Store</asp:LinkButton> <asp:LinkButton ID="lbContact" runat="server">Contact Sean</asp:LinkButton> </ul> </nav> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form>

    Sunday, April 8, 2018 3:43 AM

All replies

  • User475983607 posted

    The following line of code is looking for an "Images" folder at the same level as the CSS file.  

    background: url("Images/background_image.jpg") no-repeat center center fixed;

    Usually, you want a relative reference because you'll have a CSS folder for CSS files and an Images folder for images and the folders are at the same level in the file system.

    background: url("/Images/background_image.jpg") no-repeat center center fixed;

    If you are working with localhost IIS and not IIS Express then you'll need to do this as "/" will go to the root of localhost which is the default web site.  Use IIS Express... 

    background: url("../Images/background_image.jpg") no-repeat center center fixed;

    Keep in mind, I can't see your project so I have no idea how the files and folders are structured but hopefully this provides a direction.

    You can learn about relative file reference here; https://www.w3schools.com/html/html_filepaths.asp

    I assume you are aware the body CSS overwrites the background image with a black background.  Maybe this is hiding the background image? 

    body 
    {
        background-color: #000000;

    Sunday, April 8, 2018 1:09 PM
  • User2103134756 posted

    mgebhard,

    Thanks for pointing out the error but that was an oversight on my part when I changed the path back after trying to load it from the site's root folder. I still can't pick up the image.  

    Sunday, April 8, 2018 2:45 PM
  • User475983607 posted

    Thanks for pointing out the error but that was an oversight on my part when I changed the path back after trying to load it from the site's root folder. I still can't pick up the image.  

    You do realize that I cannot see your code or project through the forum, right?  If you want help then you'll need to post code that reproduces the issue.  Otherwise, come up with a sound troubleshooting plan...

    The simplest troubleshooting approach is using your browser's address bar to get the image.  If you have trouble getting the image to show, drag the image to a web page.  Visual Studio will provide the correct path.  You're goal is to get the absolute path to the image.

    Copy the absolute URL to the CSS file and test. If you cannot see the background then you have an issue with other CSS.  Remove all CSS but the html background and get that working.  Then add CSS one at a time until it breaks testing at each iteration to find the conflicting CSS.  Fix the CSS.

    Next, start removing the front bits of the URL and retesting until you get a working relative reference.  

    For example, start with 

    IIS Express

    http://localhost:1973/images/background_image.jpg

    IIS localhost

    http://localhost:1973/myappname/images/background_image.jpg

    Next 

    /images/background_image.jpg

    or

    /myappname/images/background_image.jpg

    By chance did you read the linked document that explain file references?  If not, you should.  Are you using IIS Express or localhost IIS? 

    Sunday, April 8, 2018 3:08 PM