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:
~ 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.
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.
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.
I've opened your website on my side and it seems that the background image shows well.
Best Regards,
Jenifer
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
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
MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
68 Points
342 Posts
Background image not showing in IE v11, Windows 7 and 10
Oct 24, 2018 01:29 PM|mgambone|LINK
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 {
position: fixed;
top: -50%;
left: -50%;
/*preserve aspect ratio*/
width: 200%;
height: 200%;
z-index: -100;
}
#bg img {
position: absolute;
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.
All-Star
47210 Points
17421 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 24, 2018 01:36 PM|PatriceSc|LINK
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.
Member
68 Points
342 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 24, 2018 03:38 PM|mgambone|LINK
Response to PatriceSc:
Thanks for responding. I tried what you suggested. It still doesn't display the image.
All-Star
47210 Points
17421 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 24, 2018 04:03 PM|PatriceSc|LINK
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.
Member
68 Points
342 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 24, 2018 07:57 PM|mgambone|LINK
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.
Contributor
2130 Points
705 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 25, 2018 07:13 AM|Jenifer Jiang|LINK
Hi mgambone,
I've opened your website on my side and it seems that the background image shows well.
Best Regards,
Jenifer
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
68 Points
342 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 25, 2018 12:23 PM|mgambone|LINK
Hi,
May I know what version of Internet Explorer you have and Windows OS version?
Thanks.
Contributor
2130 Points
705 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 26, 2018 03:05 AM|Jenifer Jiang|LINK
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
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.
Member
68 Points
342 Posts
Re: Background image not showing in IE v11, Windows 7 and 10
Oct 26, 2018 12:41 PM|mgambone|LINK
Hi, Jennifer,
Thank you so much. Got it to work.