Fixed Background tut - IE 11.0 - Post...

User 2744602 Photo


Registered User
162 posts

Hi guys :)
I have just completed the short tut of fixed backgrounds and it works fine in edge and firefox however in IE 11 it jerks as you scroll the mouse up and down not huge but very noticeable.

Is there a fix for this?
KISS is the key!
User 2484360 Photo


Registered User
3,293 posts

It is a known issue with both IE11 and the new Edge. Microsoft has known about it for a while now, but it is still an active issue. https://connect.microsoft.com/IE/feedba … ling-issue

There is a work around though. You have to add a little JS to the page for it to function correctly.


if(navigator.userAgent.match(/Trident\/7\./)) {
$('body').on("mousewheel", function () {
event.preventDefault();

var wheelDelta = event.wheelDelta;

var currentScrollPosition = window.pageYOffset;
window.scrollTo(0, currentScrollPosition - wheelDelta);
});

$('body').keydown(function (e) {

var currentScrollPosition = window.pageYOffset;

switch (e.which) {

case 38: // up
e.preventDefault(); // prevent the default action (scroll / move caret)
window.scrollTo(0, currentScrollPosition - 120);
break;

case 40: // down
e.preventDefault(); // prevent the default action (scroll / move caret)
window.scrollTo(0, currentScrollPosition + 120);
break;

default: return; // exit this handler for other keys
}
});
}


Hope that helps. :)
User 2744602 Photo


Registered User
162 posts

Hi Adam and thank you!
Another question please, I am playing with the fixed background, but can not find out how to shrink the .jpg as the page moves towards the mobile size from 1920px
Will this tute show me how a fixed background is made responsive? http://www.coffeecup.com/help/articles/ … ign-layer/
KISS is the key!
User 2484360 Photo


Registered User
3,293 posts

Brett Burgess wrote:
Hi Adam and thank you!
Another question please, I am playing with the fixed background, but can not find out how to shrink the .jpg as the page moves towards the mobile size from 1920px
Will this tute show me how a fixed background is made responsive? http://www.coffeecup.com/help/articles/ … ign-layer/


Are you talking about a background image or an actual image when you say .jpg? There is a major difference there. :P
User 2744602 Photo


Registered User
162 posts

Sorry mate yes there is.

Ok I have a 1920x1080 .jpg as the fixed background, however it is not responsive. I would like to have it change size as the screen size reduces. I have played around with some settings but found nothing that works yet :-\

Also I understand that we should be using smaller images as the screen size moves down to mobile size, is this simply a matter of hiding the previous image and placing in a new one? or should I be looking at another tut?

Thanks for your help with this mate!!

PS the .js worked a treat :)
KISS is the key!
User 2484360 Photo


Registered User
3,293 posts

Brett Burgess wrote:

Ok I have a 1920x1080 .jpg as the fixed background, however it is not responsive. I would like to have it change size as the screen size reduces. I have played around with some settings but found nothing that works yet :-\


http://www.coffeecup.com/help/articles/ … ?locale=en is the one you are looking for here. :P Pay attention to the Size section, I believe cover should help you out there.

Also I understand that we should be using smaller images as the screen size moves down to mobile size, is this simply a matter of hiding the previous image and placing in a new one? or should I be looking at another tut?


And this article http://www.coffeecup.com/help/articles/ … e-element/ for this one. It is a easier then hiding and placing a new image.
User 2744602 Photo


Registered User
162 posts

Ok found that Contain is the one to use, I will go play with sizes and padding!!

LOL Thank you!!! I just posted as you must have, will go and look mate!

Cheers again!
KISS is the key!
User 2744602 Photo


Registered User
162 posts

Ok this has reared its ugly head again, the script was working on a quick test but it is failing to work now on the site I am building.

I am right when I place the above between

<script>
and
</script>
tags yes?

and it can be placed in the head or body section yes?
KISS is the key!
User 2803868 Photo


Registered User
4 posts

Hi Guys;
I am having this same problem.

I have added the js that Adam show here to my html but it still doesn't seem to work.

I have add the image to my css

I am attaching the html since it seems to work in chrome and firefox.

Thanks for any light you can shed on this.
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.