背景图片的高度和宽度在IE11上不起作用

Question

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-

Answer 1

Chris Coyier of CSS-Tricks proposes 3 great solutions which works quite well, 2 of which being pure CSS.

You can read up on this here

Examples

Example 1 (fixed position -- ideal option)

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

Example 2 (inline image -- next best thing)

HTML

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

CSS

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

Example 3 (uses filters -- less recommended)

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  /* IE fallback support */
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}

Answer 2

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.