Just added the code to http://www.insachenkunst.de/kuenstler/tom-schulhauser/, and it worked instantly in IE8.

Just a hint: Scaling for 'contain' seems a little off - some 20-40 Pixels seem to be cut off at the top and bottom compared to browsers that support the poperty natively.

Great Job and a welcome successor to https://github.com/louisremi/jquery.backgroundSize.js

As always: If I can be of any helped zeroing in on the issue, let me know!

why "background-attachment: fixed" only for body?
can i using for several div?
thanks!

Hi
In order to get the same view in IE9, I have to device background-size and background-position differently.
Maybe something that you may want to consider for your behavior...

Test in IE9 and other browsers with the fiddle:
http://jsfiddle.net/fBhXf/10/

Basically this example is for a

<div id='example'></div>

and with CSS:

#example {
    background-image:url(http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png);
    background-size:100vw;
    background-position:-20vw -20vw;
    width:10vw;
    height:10vw;
    border:solid green 1em;
}
.lt-ie10 #example {
    background-size:1000vw;
    background-position:22vw 22vw;
    width:0.2vw;
    height:0.2vw;
}

Where '.lt-le10' identifies the browser as before IE 10.

Hi there - great solution to the missing background-scaling in IE8 :-)

I think the scaled down graphics looks better in IE8 (with your htc) than they do with IE9's native scaling - is there anyway to make it work in IE9 as well?

Using the following code:

pagebody, #PageBody {

width: 100%;
height: 100%;
background: #fff url(/graphics/bg.jpg) no-repeat top center;
background-size: contain;
margin-top:0!important;
-ms-behavior: url(/graphics/backgroundsize.min.htc);
}

Get the following 2 errors in IE 8:

SCRIPT438: Object doesn't support property or method 'addEventListener'
frameworks-e8054ad804a1cf9e9849130fee5a4a5487b663ed.js, line 3 character 10518
SCRIPT438: Object doesn't support property or method 'pageUpdate'
github-a9c9533b5e2305f95bfe7370e447c1c68a68897b.js, line 2 character 5923

Any ideas?

The polyfill works great. However when I use selectivizr,js the polyfill stops working. You see the image not scaling to contain the div. I need selectivizr because I use pseudo elements. But I would love to have this polyfill work. It sometimes on refresh seems to work for a micro second, then back to not behaving correctly. Please help. Thanks.

The polyfill broke IE 9 for me, which I only found out after it would have been a major pain to create a separate stylesheet for browsers requiring the the polyfill. I've written a little patch which resolves the problem by testing for the IE version before applying the event handlers (four dots .... indicate that I've left out the original code here for clarity):

....
var rsrc =  ....
    var re = /MSIE ([0-9\.]+)/;
    var match = re.exec(navigator.userAgent);
    var browserVersion = 0;
    if(match && match.length > 1) {
        browserVersion = parseInt(match[1]);
    }

....
function init() {
    if(browserVersion >= 9) {return true;}
....
function handlePropertychange() {
    if(browserVersion >= 9) {return true;}
....
function handleResize() {
    if(browserVersion >= 9) {return true;}
....
function restore() {
    if(browserVersion >= 9) {return true;}
....

The patch should work for IE < 7, but I haven't tested it with versions below 7.

I can't seem to get this polyfill to work take a look here:

http://www.huebnerpetersen.com/mtm/index.php?r=main&id=72

You can view it in Chrome to see what it is supposed to look like. But in IE, the picture of the family does not cover the element as it's supposed to.

The element in question is: #main-content-container. The css:

position: relative;
z-index: 50;
width: 496px;
min-height: 521px;
max-height: 521px;
margin-left: 0px;
margin-right: 0px;
padding: 0px 0px 0px 0px;
overflow-x: hidden;
overflow-y: hidden;
background-size: cover;
-ms-behavior: url(../backgroundsize.min.htc);

and an inline style for the background image: background-image: url("gallery/chris_brown.jpg");

backgroundsize.min.htc is here: http://www.huebnerpetersen.com/mtm/backgroundsize.min.htc

For some reason the background does not get covered. It repeats instead. I added background-repeat: no-repeat and that gets rid of the repeating, but the background still does not cover the element.

Any thoughts on this?

Folks are using this with elements that are styled dynamically with JS (#31, #15 (comment), #32 (comment)), so we need a way for site scripts to trigger an update after they're done styling.

background-attachment: fixed is often used with background-size: cover for a full window background image.

Unfortunately, mobile browser support for background-attachment: fixed is pretty poor; combined with background-size: cover, this often means the background image is stretched to the full height of the page, e.g. this thread at the CSS-Tricks forums.

It would be nice if we can do something about it ;-)

If an element starts with background-image: url(...) but javascript later sets it to background-image: none, the original image still displays.

My workaround was to add img.style.visibility = "hidden"; to ln 138 (in the else clause of refreshBackgroundImage, when the src cannot be parsed).

For a second it worked in IE8, but it doesn't work anymore after a reload.
Could this be because the div with background-size is position absolute?

I'm trying to add a transparent overlay for fallback image, its not reflected is there any workaround?

For IE8 i specifically tried

filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#B3000000');

I cannot seem to get the polyfill to work. When viewed in ie8 the background image is not appearing. Any advice you can give would be appreciated.

I must say it took a while of eliminating elements before I found out it was my doctype string causing it.

here's a dump of the home page and you can see how the background image should look in a browser supporting background-size:

http://www.sdc-hosting.com/images/files/nb/site/site.htm

However, in ie8, only a white (null?) background image is displayed (though you can briefly see the original unscaled image if you hammer F5)

In the first link's source, you'll see

However, the image will display and scale properly in ie8 if I reduce this to

but that will break the positioning of my DIVs, you can see the result here:

http://www.sdc-hosting.com/images/files/nb/site/site2.htm

I am pretty close to just giving up on a background scaler for ie8, but I would really appreciate it if someone considered my case. Thanks a lot!

My problem is related to "Doesn't work" but is a little different. The polyfill works fine if the content on the page is short. if the content overflows the screen, however, the polyfill either doesn't work, or is mispositioned too far to the left. Occasionally a brief flash of the correctly positioned image can be seen before the image adopts its incorrect position. The pages involved mostly have static contents, but one page does have content that is added as an iframe.

The site is live: http://hurrayfortheriffraff.com if you would like to see these issues in IE8.
Everything works fine in Chrome/afari/Firefox, on my Mac anyway.

Hi, youre pollifill doesnt work in ie8

SCRIPT65535: Unexpected call to method or property access.
backgroundsize.htc, regel 262 teken 2

(or backgroundsize.min.htc, regel 6 teken 3394)

Only tested in IE8.

Possible suggestion: use "try{}".

I'm building a new framework with the mobile-first, progressive enhancement approach.

Mobile-first means I need to use workarounds for media-queries and for convenience and maintenance, I chose respond.js.
I think your polyfill is executing earlier than respond.js, which makes background-images cover the "mobile version" of the elements. Once respond.js hits, most elements are enlarged.

So in order for this polyfill and respond.js working nicely together I need to either load the polyfill after respond.js hits, or I need to refresh the polyfill calculations after respond.js is executed.

Any advice on that one is very much appreciated.

And great work, btw! ;-)

I have absolutely positioned anchors, as child elements of a div with a background image. On IE8, the anchors are always underneath the div - so cannot be clicked, even when explicitly set with z-index.

Thanks for the great polyfill which saved me a lot of headaches!
Currently, I'm building an app which shows and hides a lot of different parts of the page. I've noticed that if I show (using jquery('...').show()) parts of the page which have been hidden before and which contain elements which use the background-size-polyfill, then the background images don't show.
I haven't found a good way to work around this yet.

Thanks for the great feature but it doesn't for tag

e.g.
CSS:
.splash {
background: url(http://louisremi.github.io/background-size-polyfill/images/jar1.jpg) center no-repeat;
-ms-behavior: url(/backgroundsize.min.htc);
behavior: url(/backgroundsize.min.htc);
background-size: cover;
}
HTML:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="960" height="400" class="splash" />

background-size-polyfill is waiting in a loop, until it finds the element. Perhaps it would be better to have a general delay from 10ms or 100ms for the next try, because if you are using background-size-polyfill several times in one page it is very memory intensive.

I have a site that i developed in PHP and then moved all the code over into JSP. Now the background size file isn't working. Does this code work outside of the Apache PHP environment?

Hi louisremi,

Thanks for your work it pretty much worked out of the box!
Something i am wondering if there is a way to change dynamically the background image via CSS with IE8 and using the htc hook.
Let s say you have 2 skins where each of them have a different background images

<div class="skin1">
   <div class="elem> </div>
</div>

.skin1  .elem {
background-image: url(images/img1.jpg);
}
.skin2  .elem {
background-image: url(images/img2.jpg);
} 

.elem{
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -ms-behavior: url(backgroundsize.min.htc);
}

i managed to display the img1 ok in IE8 , but when i switch the skin css class from skin1 to skin2 the img2 does not showup as if the backgroundsize.min.htc executes once . Do you know if there is a way to reset it ?

thanks

-seb

When applying the background size behavior to a form button element, the firstChild attribute isn't available because a form button isn't polymorphic of a Node object. In the event that element.firstChild is undefined, another method must be used. Maybe do what CSS3PIE does, wrap the element with a css3-container element and apply the newly created elements inside the css3-container with the original element z-indexed on top?

EDIT

Upon further review, it would seem that it is more directly related to the use of background-size: contain; I just changed a div to use that style and it caused the same error.

REEDIT

I'm an idiot :-) the background-size: contain wasn't the issue I thought it was. I had exact values in a general stylesheet that was overriding my declaration of background-size: contain. So the error is gone, BUT the issue is not fixed. The background is not sizing for form buttons.

Hey, maintainer(s) of louisremi/background-size-polyfill!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library louisremi/background-size-polyfill is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "louisremi/background-size-polyfill",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

(This is a continuation of #33)

The CSS spec says background-image applies to "all elements", so it would be good if this worked with (visible) elements that cannot have child elements. (The polyfill currently appends a <img> to the element to fake a background image, so it cannot work with elements like <img>.)

A few use cases I can think of:

• Custom checkbox and radio <input>'s
• Fancy image <hr>'s
• Styling <menuitem>'s (if/when browsers support it)

Was trying to use this for a client site and worked perfectly locally. Upon upload each page that used this for the background image would load briefly then direct to a 404 error page in IE8 only (did not try IE7 or lower). After hours of trouble shooting I realized, with everything else intact, remove the -ms-behavior: url(/backgroundsize.min.htc); was effectively breaking the site.

Resorts to using MS filters to help accommodate full screen images within divs for backwards compatibility.

I'm using background-size-polyfill in IE8. My div contains position: relative and z-index: 1.
The problem is that the generated IMG is not only too big but also misplaced.
Any thoughts?

Trying to use this polyfill but our app stores all static files and assets in an S3 bucket. This doesn't seem to play nice with the polyfill.

Are there any tips or tricks to make sure that this polyfill plays nice with CDNs?

I wrote this grammar in our less file according to the specifications.
But I didn't get a result in IE8.
I don't know if it's because of less compilation? django compress? or some other reason?

Well i'm workign on a website, and we need to use on i8

using this lib works fine BUT....

But i can't reproduce the vidos or click any link

also i have videos and i cant' reproduce them

i tried to use background: no-repeat center center fixed\0/ but this generate an error at sass

this is my sass

#main {
    .section-page{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-page.jpg',sizingMethod='scale') !important;
         background-size: cover;
                  -ms-behavior: url(backgroundsize.min.htc) !important;
              behavior: url(backgroundsize.min.htc) !important;
    }
    .section-dep {.banner-dep {.title-dep{background-color:white;}}}
    .section-one{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-1.jpg',sizingMethod='scale') !important;
         background-size: cover;
        /* The url is relative to the document, not to the css file! */
        /* Prefer absolute urls to avoid confusion. */
        -ms-behavior: url(backgroundsize.min.htc) !important;
        behavior: url(backgroundsize.min.htc) !important;
    }
    .section-two{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-2.jpg',sizingMethod='scale') !important;
         background-size: cover;
        /* The url is relative to the document, not to the css file! */
        /* Prefer absolute urls to avoid confusion. */
        -ms-behavior: url(backgroundsize.min.htc) !important;
        behavior: url(backgroundsize.min.htc) !important;
    }
    .section-three{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-3.jpg',sizingMethod='scale')  !important;
         background-size: cover;
        -ms-behavior: url(backgroundsize.min.htc) !important;
        behavior: url(backgroundsize.min.htc) !important;
        z-index:0;
         background: no-repeat center center fixed\0/; 
        
    }
    .section-four{
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-4.jpg',sizingMethod='scale') !important;
         background-size: cover;
        /* The url is relative to the document, not to the css file! */
        /* Prefer absolute urls to avoid confusion. */
        -ms-behavior: url(backgroundsize.min.htc) !important;
        behavior: url(backgroundsize.min.htc) !important;
    }
}


#container{ 
    > footer{
        section.footer-menus{
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg-5.jpg',sizingMethod='scale') !important;
            background-size: cover;
            /* The url is relative to the document, not to the css file! */
            /* Prefer absolute urls to avoid confusion. */
            -ms-behavior: url(backgroundsize.min.htc) !important;
            behavior: url(backgroundsize.min.htc) !important;
        }
    }
}

Please HELP!!!

In my LESS-File (Joomla/Gantry4) I use BSP like this:

body #rt-logo {
    background: url(/images/logos/Logo.png) 50% 0 no-repeat !important;
    height: 150px;
    width: 150px;
    background-size: contain !important;
    -ms-behavior: url(/backgroundsize.min.htc);
}

In IE8 I can see the properly sized logo, but underneath it I can see the original logo, because the PNG file has transparent parts.

Currently, the polyfill does its job without testing whether the browser supports background-size or not, depending on the site author to include it only for IE<9. It would be good if it can deactivate itself if the browser does support background-size. (In reality this would only be IE9, but a feature test would be best.)

See: http://support.microsoft.com/kb/925014

When performing removeChild() on an element with background-image set it will trigger a false mixed content warning. You need to remove the background-image first or use outerHtml = ''.

I had to convert my background-position css from left top to 0 0, although the documentation said it would work.

There is a comment around line 50-55 regarding the background positioning values:

    // Only keywords or percentage values are supported
    backgroundPositionX: positions[ pos[0] ] || parseFloat( pos[0] ) / 100,
    backgroundPositionY: positions[ pos[1] ] || parseFloat( pos[1] ) / 100

Does "Only keywords ..." mean "left", "center", etc. or is there something I missed? The documentation (here at Github) states:

lengths (px, em, etc.) in background-position (only percentages and keywords such as > center work)

as criteria for the background-position value.

If I use left top instead of 0 0 the script errors out, declaring the value of backgroundPositionX/Y as NaN (leaving me with no image at all). After I switched in 0 0 the script worked just fine.

Is this a mistake or is the documentation outdated/incorrect?

(I didn't try out the minified version, could be that this works fine in that version.)

I'm using Bootstrap's Tabs feature to show different images on each tab. For some reason, imgRatio is NaN on line 177, so the following line fails with "Invalid argument".

img.style.left = delta + "px";

Changing this line to the following seems to fix the problem.

if (!isNaN(delta)) {
    img.style.left = delta + "px";
}

雖然IE6的用戶已經不多，但是使用IE7的用戶還是有，希望可以兼容到IE7，請問可以嗎

Is this possible to use the polyfill with a predefined size, beyond 'cover' or 'contains' like:

element {

background-size : 500px 200px

}

First of all, I think - when you giving example, it should be minimal, so everyone can understand what he need to make it work.

Your index.html is visually good, but not that good at explaining what I need to do to make it work.
So, I followed your instruction and created this simplest code:
Err, I don't know how to paste code here, since [code] no work and html disappears.
Look code here: http://stackoverflow.com/questions/25338009/background-size-polyfill-does-not-work-in-ie8

I made this minimal test page and background-size: contain and cover completely no work. In IE8 background acts the same way as without this thing.

Hi,

I'm testing out your plugin in an angularjs app that's using background-size in a few places (of course breaking in IE8).

On my dev server, the downloaded and unzipped background-size-polyfill bundle is loading and working fine (so, not a server issue). However, in the angular app the script isn't doing anything. I think I've narrowed the problem down to the default angular project/app/.htaccess (which has "AddType text/x-component htc" on board, inside <IfModule mod_mime.c></IfModule>), OR (maybe) a jquery version incompatibility.

I've got the google cdns of jquery.min 1.10.2, and jquery-ui.min 1.10.3 being loaded in the body after ng-view templates, and custom css (with backgroundsizemin.htc) loading conditionally from a lt IE9 statement in the header.

What am I missing? Any ideas on how to go about fixing this? Thanks.

I'm getting an error in IE 8:

Invalid argument. -> line 217

img.style.top = -delta + "px";

This doesn't always happen. I can see that an image has been drawn in the upper-left corner of my containing div. It isn't the image shrunk down - rather, it is an icon of a picture. Other times it works OK. Is there an issue if the image is large and hasn't finished loading? That really shouldn't be the case (I don't think) because the background image loads then flashes off.

I need the property background-repeat:no-repeat; Is there a way to get the polyfill to simply ignore this property?

When I remove it, the polyfill works as expected in IE8, but when I have it defined, the polyfill won't work.

Any way to get this to work with background-repeat:no-repeat;?

I’ve just skimmed the .htc code and it appears that the created img element has no alt attribute. That causes some screen readers to read the filename, which is awkward. Add an empty alt attribute fixes this.

Some documentation on how to report bugs, submit pull requests, etc. would be good. Some (not necessarily perfect) examples:

• https://github.com/jquery/jquery/blob/master/CONTRIBUTING.md
• https://github.com/jquery/jquery-mobile/blob/master/CONTRIBUTING.md
• (We can probably use some more examples too 😟)

Some image gallery libraries (namely FlexSlider) clone the first and the last image to make consistent scrolling possible.

Since it's a deep clone (with the wrapped <div> and <img>) this should be possible in theory. However, right after the clone the init() kicks in and the script breaks. For now I hacked the script with a early return when the background-image div has childs (and therefor must have been polyfilled already).

I was unable to create a cleaner solution. You might want to look into it.

Thanks for the great work!

Your documentation states it works with IE6, but it doesn't. Please correct because IE6 still accounts for 1.30% of world wide web traffic and that's a lot of users.

Background-size-polyfill doesn't work with pseudo elements :after and :before.

Here's an example:

div.test:after {
        background-image: url(test.jpg);
        background-repeat: no-repeat;
        background-position: center center;
    -webkit-background-size: contain;
        -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    -ms-behavior: url(backgroundsize.min.htc);
    behavior: url(backgroundsize.min.htc);
}

In IE8, the background-size:cover work fine but i noticed that background-attachment:fixed stop working. Any ideas why?

Thanks!