#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0

    Background image not extend to full width in IE8


    Hi,

    I have a div with background-image of size 800pxX778px. The background image render correctly in all browser except IE8. For other browser i used css properties i.e background-size: cover, that streatched the image to fit in full window width. But in IE8, the background-size does not work.

    Anyone can help me how to fix this issue to have this background image in full window in case of IE8 using javascript or jquery. I don't want to use any framework for this.

    Also i can not use the image through <img> tag inside div. I have to use this using background image.

    Thanks,
    Mukesh
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    26
    How about the suggestions here. The main one being to apply IE-specific css rules:
    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale')";
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0
    Hi,

    Thanks for reply. But in my case the images comes randamoly as below code:

    html code:

    <div class="specie_nav_ShowBox web-only backgroundImageHome" id="specie_nav_ShowBox"></div>

    css code:
    .backgroundImageHome {
    background-image: url("/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a");
    }
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    101
    Rep Power
    26
    So, try the css rules from that example, but replace the example "images/logo.gif" with your actual image path "/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a".
    Code:
    .backgroundImageHome {
    background-image: url("/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a");
    background-size: cover;
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a',
    sizingMethod='scale')";
    }
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Originally Posted by mod_speling
    How about the suggestions here. The main one being to apply IE-specific css rules:
    Code:
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='images/logo.gif',
    sizingMethod='scale')";
    FYI, You only need to use one of those two properties. The "-ms-filter" property is only useful if want to avoid errors showing up with the CSS Validator because of the "filter" property and you don't mind not supportting IE versions before 8, since only IE8 and IE9 support both the "filter" and "-ms-filter" properties.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    6
    Rep Power
    0

    background-size issue in ie9


    Thanks for replying me. Yes it works. But also getting one issue. It also streching background-image in IE9, which i don't want. Below code i used

    <div class="specie_nav_ShowBox" id="specie_nav_ShowBox" style="background-image:url(<%# Eval("SpecieBgHome") %>);
    filter: progidXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='<%# Eval("SpecieBgHome") %>', sizingMethod='scale')/;">&nbsp;</div>

    The restriction over here for me that, i have to use this hack in inline style, not by using class where i can target ie8.

    Please help me to fix this issue. I really don't want to affect in IE9 browsre.





    Originally Posted by mod_speling
    So, try the css rules from that example, but replace the example "images/logo.gif" with your actual image path "/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a".
    Code:
    .backgroundImageHome {
    background-image: url("/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a");
    background-size: cover;
    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a',
    sizingMethod='scale');
    
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/CMSPages/GetFile.aspx?guid=f618168d-a6b7-46e2-8b8f-69fe10ef443a',
    sizingMethod='scale')";
    }

IMN logo majestic logo threadwatch logo seochat tools logo