louisremi / background-size-polyfill

Adds support for background-size "cover" and "contain" to IE8

background-size polyfill

An IE behavior adding support for background-size to IE8.

Demo

Introduction

Progressive Enhancement is the mantra I live by. It means "Have fun with CSS3 and don't worry about IE8 users; they'll never notice they're missing out on your gorgeous text-shadows and gradients, anyway".

All was well until I discovered the elegance of background-size: cover; and background-size: contain;. The first one, for instance, allows an image to completely cover a background, without having to send a 1920x1080 background image down the pipes.

Unfortunately, they don't degrade gracefully: websites would likely appear broken to IE8 users :-( ...unless you use this behavior!

How to use it?

Upload backgroundsize.min.htc to your website, along with the .htaccess that will send the mime-type required by IE (Apache only — it's built in nginx, node and IIS).

Everywhere you use background-size in your CSS, add a reference to this file.

.selector { 
	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);
}

The elements styled this way should have a position: relative; or position: fixed; and a z-index. If not, they will be given a position: relative; and z-index: 0;.

Limitations

This polyfill inserts an <img/> in the background of all elements matched in the css to emulate the background-size value. Calculating the displayed position and size of this image is quite complex and function of numerous parameters:

• the size of the element itself
• the size of the image
• the values of background-[size/position/clip/origin/attachment/scroll]

It is thus impossible to emulate background-size completely and perfectly. But it's still possible to enjoy the main features:

• correct position and size of the background image
• updated position and size on browser resize
• updated image, position and size when the background-image is modified

The following style properties, values or behavior aren't supported:

• multiple backgrounds (although the :after trick can still be used)
• 4 values syntax of background-position
• any repeat value in background-repeat
• non-default values of background-[clip/origin/attachment/scroll]
• resizing the background when the dimensions of the element change

Removing any of these limitations is probably just one fork away...

License

MIT Licensed http://louisremi.mit-license.org/ Early versions by @louis_remi, now maintained by @jefferyto

Are you using this in a paid work?
Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON

Changelog

0.2.0 (2013-08-27)

• Added support for:
  • Dynamically changing position and size of the background image (partial reimplementation of #8)
  • Dynamically changing background image with CSS classes
  • Dynamically setting background image to none (#13)
  • Lengths and percentages for background size (partial reimplementation of #8, #19)
  • Lengths for background position
  • Debouncing window resize events (alternative implementation of #17)
  • Cloning polyfilled elements (#2)
  • background-attachment: fixed for body (#22)
• Fixed:
  • JS error when using left or top for background-position (#14, #21, #24)
  • Other "Invalid argument" / NaN JS errors (#11, #16, #23)
  • JS error when printing
• Use standard HTC XML tags (#10)
• Work around IE hang on unload when the JScript portion is greater than 512 bytes
• Added unit tests, grunt build process
• Misc fixes and code cleanup

0.1.0 (2012-11-23)

• Initial release

background-size-polyfill's Issues

Works great in IE8 - any way to activate it in IE9?

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?

Add a way to trigger updates from site JS

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.

Ignore repeat?

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;?

Doesn't work. Repeats background instead of cover.

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?

Works right out of the box, but scaling is off by 10%

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!

Is this really work in IE8 just with adding -ms-behavior?

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.

Changing dynamically the background image with IE8 ?

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 is the polyfill executed? How to refresh?

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! ;-)

Fix background-attachment: fixed for mobile browsers

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 ;-)

Is doesnt work

Hi, youre pollifill doesnt work in ie8

IE

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.

IE8 transparent background color

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');

broken by certain doctypes?

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!

SCRIPT65535: Unexpected call to method or property access.

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{}".

anchors over background-image on IE

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.

Error when cloning

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!

Add contribution documentation

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 😟)

JSP sites not working

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?

Issue with form button elements. element.firstChild undefined, line 6, char 409 in minified

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.

background-size and background-position on IE9 with 'vw'

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.

Will this work in LESS?

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?

backgroundPositionX/Y don't accept keywords?

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.)

can i use "background-attachment: fixed" for several div?

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

Won't work on hidden elements

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.

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

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);
}

Background Polyfill conflict with selectivizr.js

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.

Memory intensive due to no delay when waiting for element

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.

background-attachment:fixed stop working in IE8

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

Thanks!

Dynamically setting background-image: none still displays image

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).

Wrong size and position for generated IMG

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?

Breaks entire page/site when used with Microsoft Azure Servers

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.

Causes mixed content warnings on secure pages.

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 = ''.

polyfill only works if content doesn't overflow screen

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.

Doesn't work for <img> tag

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" />

Add empty alt attribute to generated image

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.

IE8: Original image below resized image

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.

Image does not appear

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.

[enhancement] Add missing bower.json.

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!

CDN/Amazon S3 - any special considerations?

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?

Line: 182 Error: Invalid argument.

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";
}

Doesn't work...

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?

Object doesn't support property or method 'addEventListener' + 'pageUpdate'

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?

Support elements that cannot have child elements

(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)

backgroundsizemin.htc (apparently) fails to load in angularjs app

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.

Deactivate self if browser supports background-size

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.)

background-size with px

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

element {

background-size : 500px 200px

}

IE 8 error

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.

請問是否可以兼容IE7/IE6

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

Breaks IE 9

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.

Sass and frozen links

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!!!