Infinity Pro StudioPress Theme IE11/Edge Fix Background Image Jumping

If you use the Genesis Framework Infinity Pro theme (or any theme with a fixed background), the background images will jump when scrolling in IE 11 (and numerous earlier versions but please don’t be using those!) and in most versions of Edge. A fixed background on a website has been doing this for years and Microsoft has not ever released a fix for it. The newer Edge browser may fix this since it will be using a similar base as Chrome, but there a so many people and companies still using IE11.  After searching for a solution, the only one I found only fixes the background image on the first panel.

Using CSS, you need to remove the first panel background image, and place a background image on the body tag.  Below is what I did (this may not be all inclusive to what you need so you may need to supplement below by doing additional searches for solutions on the internet):


@supports (-ms-ime-align: auto) {
/* Microsoft EdgeV13&14 CSS styles go here */
body.front-page {
position: relative;
background: url(place background image url here);
background-position: top center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
#front-page-1 {
background: none;
}
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body.front-page {
position: relative;
background: url(place background image url here);
background-position: top center;
background-repeat: no-repeat;
background-attachment:fixed;
background-size: cover;
}
#front-page-1 {
background: none;
}
}

This entry was posted in Browsers, Coding. Bookmark the permalink.