CSS3 background-size:cover not working in ASP.net
Question
I've got a problem and it's driving me nuts. In short, I've tested the method in subj locally in plain HTML/CSS and it works perfectly:
<html style="
padding:0px;
border:0px;
margin:0px">
<body style="padding:0px;border:0px;margin:0px;">
<form style="width:100%;height:100%;padding:0px;border:0px;margin:0px;background: url(background.jpg) no-repeat fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale');">
<div style="float:right;width:500px;height:100%;background-color:#ffffff;padding:0px;border:0px;margin:0px;"></div>
</form>
</body>
</html>
But trying to put it in ASP.Net fails utterly, as the image isn't resizing but shows up in intrinsic size.
<body>
<form id="MainForm" runat="server" style="height:100%;width:100%">
<div class="MainArea" runat="server">
<div class="Header">
<asp:Label ID="PageTitleLabel" runat="server"></asp:Label>
</div>
<%
string logoPath =
System.Web.Configuration.WebConfigurationManager.AppSettings[ "logo" ];
if( !String.IsNullOrEmpty( logoPath ) )
{
%>
<div class="GroupXLargeMargin">
<img src="<%= logoPath %>" alt="logo" />
</div>
<%
}
%>
<div class="GroupLargeMargin">
<div class="TextSizeXLarge">
<asp:Label ID="STSLabel" runat="server"></asp:Label>
</div>
</div>
<div class="MainActionContainer">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
And CSS:
*
{
margin: 0px;
}
html, body
{
width: 100%;
height: 100%;
padding: 0px;
}
body
{
font-size: 0.8em;
font-weight: normal;
font-family: "Segoe UI", Verdana, Tahoma, Arial, sans-serif;
background-color: #ff5500;
color: #222222;
background: url(../App_Themes/Default/background.jpg) no-repeat;
background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../App_Themes/Default/background.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../App_Themes/Default/background.jpg', sizingMethod='scale');
}
I can see no reason for it not to work, but it doesn't. The ASP page is ADFS sign-in master page, if that matters. I've tried applying the background to various elements, and it's always the same - works in HTML, doesn't in ASP.Net.
1 answers
solution1
0 2013-06-10 06:55:35
Well, seems I had to post it to make myself think better :) It all comes down to a single statement in master page itself:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Comment that out and it all works. Maybe that will be a shortcut for someone.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.