How to set background image in html that work in Internet explorer?

Question

The following css code is not working in internet explorer.. Please suggest me the solution that work in internet explorer to set background

body {
background: url("images/Login-BG.png") no-repeat center center fixed;

-moz-background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-size: cover;
}

Nothing wrong with your code, should work in IE. I just checked. Here you go. http://jsfiddle.net/b7KvC/ — Nitesh, Oct 18 '13 at 12:03
What version of IE? IE<9 doesnt support it (https://github.com/louisremi/background-size-polyfill) — megawac, Oct 18 '13 at 12:04
Mine is ie8. Any feasible solution that i can use to make it work in ie? — ANILBABU, Oct 18 '13 at 12:10

aaronmallen · Answer 1 · 2013-10-18T13:45:18.250

2

Older version of IE don't support background-size: if you need to use a fall back for older version of IE do this:

body {
/* ie fallbacks */
background-image: url(images/Login-BG.png);
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Login-BG.png', sizingMethod='scale')";

/* desired styles */
background: url("images/Login-BG.png") no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

edited Oct 18 '13 at 13:45

answered Oct 18 '13 at 12:10

aaronmallen

1,418
1
12
29

How to set its size? this solution is displaying image at the top and it adjusted with width but height is not adjusting??????? please tell me how to set sizingMethod? – ANILBABU Oct 18 '13 at 12:15
1

you need to define height on the body. body {height:100%;} – aaronmallen Oct 18 '13 at 12:16
It worked well.. but it is not working in Chrome.. what to do? – ANILBABU Oct 18 '13 at 12:21
Internet Explorer has supported the background property since like version 4. – cimmanon Oct 18 '13 at 12:27
@cimmanon http://www.w3schools.com/cssref/css3_pr_background.asp read the notes. – aaronmallen Oct 18 '13 at 12:41
@ANILBABU you have to put the styles you want for Chrome below the ie styles CSS loads from top to bottom which means the last property you define is the selected property. – aaronmallen Oct 18 '13 at 12:42
@aaronmallen Maybe you should go back and read those notes. It specifically says that IE8 and older do not support multiple background images (`background: url(foo.gif), url(bar.gif)`. This question has nothing to do with multiple background images. The document fails to mention that background-size is not supported by IE8 and older. Also, w3schools is not to be considered a reliable resource. – cimmanon Oct 18 '13 at 13:21
@cimmanon 1. you're being abrasive, and nonconstructive. 2. I have personally seen ie have issues with virtually every possible CSS selector you can think of. 3. I've never in my life heard that W3schools is not considered a reliable resource. – aaronmallen Oct 18 '13 at 13:28
@aaronmallen 1. You're being misleading, I'm just calling you out on it. 2. This question has nothing to do with selectors, either. 3. http://www.w3fools.com/ – cimmanon Oct 18 '13 at 13:36
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/39495/discussion-between-aaronmallen-and-cimmanon) – aaronmallen Oct 18 '13 at 13:37

score 0 · Accepted Answer · answered Oct 18 '13 at 12:06

0

For your code to work you need to have height to your body which may be equal to the height of your image.

body {
    background: url("images/Login-BG.png") no-repeat center center fixed;

    -moz-background-size: cover;

    -webkit-background-size: cover;

    -o-background-size: cover;

    background-size: cover;
    height: 265px; /* considering that 265 is the image height */
}

answered Oct 18 '13 at 12:06

Akshay Khandelwal

1,570
11
19

it is not working dear.. It is just displaying image at the center. It is not stretching to fill whole screen.. @Akshay – ANILBABU Oct 18 '13 at 12:09
in taht case remove the `center center` from `background` property – Akshay Khandelwal Oct 21 '13 at 08:09
What if you don't want to set a fixed height? – rebellion Mar 25 '14 at 08:56

How to set background image in html that work in Internet explorer?

2 Answers2

Linked