locked
Background image not showing in IE v11, Windows 7 and 10 RRS feed

  • Question

  • User-94285869 posted

    I created an ASP.NET Framework MVC website (https://realtimeceap.brc.tamus.edu) with
    background image. The following are my CSS and HTML code snippets:

    CSS:

    /*******Set background image at full size always**********/
    #bg {
    ;
    top: -50%;
    left: -50%;
    /*preserve aspect ratio*/
    width: 200%;
    height: 200%;
    z-index: -100;
    }
    #bg img {
    ;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    display: block;
    }

    HTML:

    <body>
    ...stuff here...

    <!--Background image-->
    <div id="bg">
        <img src="~/images/farm1.jpg" />
    </div>
    </body>

    The background image displays in latest Chrome, Firefox, Edge and Safari.
    Any idea why it's not showing up?

    Appreciate any help.

    Wednesday, October 24, 2018 1:29 PM

Answers

  • User839733648 posted

    Hi mgambone,

    I'm sorry that I just test your website in IE11. And I've found that the issue is due to the image itself.

    You should make sure that you didn't use the CMYK colorspace when creating the image, which IE can't handle.

    Saving it in RGB colorspace should fix the problem (for example, in Adobe Photoshop, use the "Save for web..." option).

    I've tried resaving the image, and it indeed works now in IE for me. 

    Best Regrads,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 26, 2018 3:05 AM

All replies

  • User753101303 posted

    You likely have more modern stuff such as https://www.w3schools.com/csSref/playit.asp?filename=playcss_background-size&preval=cover

    ~ is a server side notation for the application root that needs to be processed to produce the correct url ( ie /images/farm1.jpg or /folder/images.farm1.jpg).

    Try <img runat="server" src="~/images/farm1.jpg" /> and use "view source" to see what is rendered. If I remember server controls (with runat="server") are processing that kind of url automatically for you to produce the correct client side url.

    Wednesday, October 24, 2018 1:36 PM
  • User-94285869 posted

    Response to PatriceSc:

    Thanks for responding.  I tried what you suggested.  It still doesn't display the image.

    Wednesday, October 24, 2018 3:38 PM
  • User753101303 posted

    Ah sorry I missed this is MVC (which already process this kind of Url).

    What if using F12 Network to see if the http query that retrieve the image works fine or shows some error (404 not found ?)

    IMHO it's best to always use this kind of tools to see what happens rather than reading the code and wondering which wrong thing(s) could happen. I tested your CSS and all works fine here.

    Wednesday, October 24, 2018 4:03 PM
  • User-94285869 posted

    Hi,

    I do use F12 to look at the DOM Explorer.  Also checked other tabs including the Network tab.  No error at all.  I'm thinking there must be some other settings that's clashing somewhere. 

    Will check it out some more.

    Thanks.

    Wednesday, October 24, 2018 7:57 PM
  • User839733648 posted

    Hi mgambone,

    I've opened your website on my side and it seems that the background image shows well.

    Best Regards,

    Jenifer

    Thursday, October 25, 2018 7:13 AM
  • User-94285869 posted

    Hi,

    May I know what version of Internet Explorer you have and Windows OS version?

    Thanks.

    Thursday, October 25, 2018 12:23 PM
  • User839733648 posted

    Hi mgambone,

    I'm sorry that I just test your website in IE11. And I've found that the issue is due to the image itself.

    You should make sure that you didn't use the CMYK colorspace when creating the image, which IE can't handle.

    Saving it in RGB colorspace should fix the problem (for example, in Adobe Photoshop, use the "Save for web..." option).

    I've tried resaving the image, and it indeed works now in IE for me. 

    Best Regrads,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, October 26, 2018 3:05 AM
  • User-94285869 posted

    Hi, Jennifer,

    Thank you so much.  Got it to work.

    Friday, October 26, 2018 12:41 PM