Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by sakatagintoki
sakatagintoki
12,624 Points

Fallback for CSS Blending Modes?

I'm trying to become a certified Web Design Architect at NationBuilder.

Felix Yakubov
Felix Yakubov
17,475 Points
Felix Yakubov
Felix Yakubov
17,475 Points

background-blend-mode is not supported in IE yet. I doubt they will ever support latest CSS features in time... Any way, If you want to achieve parallax effect - with different images for each element of the page - you can use fixed background image. Please follow this link and check out the examples: http://www.minimit.com/demos/parallax-backgrounds-with-centered-content

The author explains how to fix your problem. Use high quality images with at least of 1200px width.

1 Answer

Dave Alexander
Dave Alexander
4,894 Points
Dave Alexander
Dave Alexander
4,894 Points

Hey, I see this was months ago. However, I found this post searching Google and thought I would post a solution for others that come across this :)

To apply the :before pseudo class to IE only just create a separate stylesheet called something like 'iefix.css'.

Inside the file put:

.yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(10, 36, 54, 0.9); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
}

Then inside your <head> put:

<!--[if IE]>
      <link href='/wp-content/themes/lawyer/css/iefix.css' rel='stylesheet' type='text/css'>
<![endif]-->

You could also just put the style right in your header if it is only a few lines:

<!--[if IE]>
      <style>
              .yourTargetClass:before {
                   content: "";
                   position: absolute;
                   height: 100%;
                   width: 100%;
                   background: rgba(10, 36, 54, 0.9); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */
               }
       </style>
<![endif]-->

Some of you may notice this is a WordPress theme. WordPress likes themes to use 'wp_enqueue_style' for adding stylesheets. Therefore, I would suggest doing something like this in your 'functions.php' file:

PHP SOLUTION FOR DETECTING IE TAKEN FROM: CSS Tricks

if ( eregi("MSIE", getenv( "HTTP_USER_AGENT" ) ) || eregi("Internet Explorer", getenv("HTTP_USER_AGENT" ) ) ) {
  wp_enqueue_style( 'ie-fix', get_template_directory_uri() . '/css/iefix.css' );
}

Hopefully this helps :)