Quantcast
Channel: Internet Explorer Web Development forum
Viewing all articles
Browse latest Browse all 3527

Parallax effect: background not working in IE & Edge

$
0
0

I have a problem with the full page background image of my parallax site in IE and Edge (the problems are slightly different depending on the browser). Everything works perfectly in Chrome, Safari and Firefox, but in IE, my background image is oddly big (zoomed in) and the background starts from the horizontal center of the image and in Edge, the image isn't displayed correctly: the browser seems to try to move the image as the site is scrolled, and it creates weird overlapping with the different background images I use on my site. I would add screenshots, but since I am not a verified user I can't. I wrote another post over here, where you can see the screenshots: http://answers.microsoft.com/fi-fi/ie/forum/ie11-windows_other/parallax-effect-full-page-background-not-working/721a7e0a-936d-4cf4-a1f2-9a6619483b34

The website and its source code can be seen live at http://somniumensemble.fi .

I'm using Bootstrap and Keith Clark's Pure CSS Parallax tutorial.

Here are abstracts of the code (I use HTML, CSS and Javascript, but Javascript should have nothing to do with the problem since it isn't used for the parallax effect at all):

HTML

<divid="unesi"class="parallax__group"><divclass="parallax__layer parallax__layer--base"><divclass="title"id="kuvaus">Unesi ääni</div></div><divclass="parallax__layer parallax__layer--back"><!-- Back layer with the bg image --></div></div>

CSS

#unesi .parallax__layer--back {
   background: url('../somnium1.jpg')no-repeat center center;
   background-size:100%;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../somnium1.jpg', sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../somnium1.jpg', sizingMethod='scale')";}

As you can see, I've already tried to fix the problem in IE with the ms filter which is often suggested to fix problems related to background images. I guess it scales the image to the whole page, but doesn't fix the positioning. I also have "background- and I've tried "background-size: cover". I have no idea what would make the background image work in IE and Edge. It doesn't matter if the parallax effect is not displayed, but I'd at least like to have static, working full page background images displayed to the user.

ANY help is very much appreciated! :)

Best regards,

Joanna




Viewing all articles
Browse latest Browse all 3527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>