背景图像高度&宽度不工作在IE11 [英] Background image height & width does't work on IE11

问题描述

这是我的客户网站 - 代码的浮动代码。社交媒体窗口小部件。

不要使用position：fixed或position：

That is my client website- http://rubowarkitekter.dk/ I already code to make background image height & width according to adjust screen size/100% height & 100% width. But that is not work on IE11.

My css code-

.home {
background: url(http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg) center center no-repeat fixed;
background-size: cover;  
z-index: -500;  
-webkit-background-size: cover;  
-moz-background-size: cover;  
-o-background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale');/* To make IE work */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg', sizingMethod='scale')"; /* To make IE work */  
}

Any idea how can i make background image to height & width 100% on IE11.

Thanks

IE11 screenshot-

解决方案

The issue here is that the image is not a background image. From your code-

<img src="http://rubowarkitekter.dk/wp-content/uploads/2013/12/forside_carlsberg.jpg" class="home">

This is an image element and not a background image added in CSS.

What you should instead be doing is adding the background image either to the "body" element or to your div wrapper.

There are a number of recommendations I feel it important to make-

1. Use the HTML 5 doctype rather than XHTML transitional

2. Remove the oncontextmenu event handler on your body element - it will not prevent someone saving your images if they want to, but will annoy your users.

3. Validate your site, there are 33 errors on the home page - which will mean inconsistent results in browsers for your users. Your site does not work correctly in Google Chrome.

4. Organise your CSS, I cannot see that code you cited is actually exists in any of the loaded stylesheets (is it currently dev only?).

5. Where-ever you use vendor prefixes (the -moz, -webkit etc.) these should appear before the standard property (without the prefix) so that it is used instead of the vendor prefix once the property is supported by the browser.

6. Clear your floats by using something like the CSS tricks clear-fix code. The social media widgets for example.

7. Do not use position:fixed or position:absolute for layout - you have not control over the viewport/device/window size your users are visiting on, so cannot assume a specific width.

这篇关于背景图像高度&宽度不工作在IE11的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！