Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts

    Problem in background image displaying in IE8

    Hi Good day!





    I got encountered problem in displaying my page in IE8, especially in my background image. It was not displayed fully on the page. It also repeated. I want to happen is the background is displayed fully.



    here is my css code:



    Code:
    html {
    background: url(images/background.png) no-repeat  fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    }


    Any help is highly appreciated.



    Thank you so mcuh.

  • #2
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Two options:
    1. https://github.com/louisremi/background-size-polyfill
    2.
    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale')";
    IE8 I don't think supports cover css

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdbolin View Post
    Two options:
    1. https://github.com/louisremi/background-size-polyfill
    2.
    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale')";
    IE8 I don't think supports cover css
    Yes, your right IE8 is not supported cover.
    where i can the code that you given?

    Thank you

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Yep, I just used that css code on my site, just replace the source url. It's probably not a perfect solution, as it looks much nicer in FF, Chrome, etc, but it does work... I haven't tried the polyfill one yet myself.

  • #5
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    I tried this code:

    Code:
    html 
    {
    background-image:url(images/background.png);
    background-color:#cccccc;
    }
    and still, the image was not displayed fully on the screen.

    I also attached the sample pic.

    Thank you so much
    Attached Thumbnails Attached Thumbnails Problem in background image displaying in IE8-sample-pic.jpg  

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Did you add the filter and -ms-filter from my above code into that CSS? Make sure you keep
    Code:
    html {
    background: url(images/background.png) no-repeat  fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/background.png',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/background.png',
    sizingMethod='scale')";
    }

  • #7
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdbolin View Post
    Did you add the filter and -ms-filter from my above code into that CSS? Make sure you keep
    Code:
    html {
    background: url(images/background.png) no-repeat  fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;  
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/background.png',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/background.png',
    sizingMethod='scale')";
    }
    hi..

    I tried to copy the code that you given to me. And I noticed that the : after progid has a red line.

    And when I run the code. Nothing as change.

    Thank you

  • #8
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts
    Hmm... I'm out of ideas. lol. I know that it won't validate any more... but it should work. Does it work in other browsers?

  • #9
    Regular Coder
    Join Date
    Aug 2010
    Posts
    712
    Thanks
    165
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bdbolin View Post
    Hmm... I'm out of ideas. lol. I know that it won't validate any more... but it should work. Does it work in other browsers?
    It's works in chrome, mozilla. Only in IE8 that it was not fully displayed. Sad to say I need to run it in IE8.

    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •