Styles.php Conditional PHP / CSS not working in IE 9

Question

I have a style.php setup which is being called using this code:

<?php include (TEMPLATEPATH . '/includes/css/styles.php');?>

This style sheet contains this code:

<?php $thumb_id = get_post_thumbnail_id();
$thumb_url_array = wp_get_attachment_image_src($thumb_id, 'title-image', true);
$thumb_url = $thumb_url_array[0]; ?>

<style>

/* GET FEATURED IMAGE FOR TITLE BACKGROUND */
.titlearea {
<?php if(has_post_thumbnail()): ?>
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
<?php else: ?>
background: url('http://www.example.com/wp-content/themes/my-custom-theme/includes/images/services-top.jpg');
<?php endif; ?>
background-size: cover;
background-position: 50% 0;
}
</style>

Which should look for a post thumbnail (im using Wordpress) and display that as the background image if there is one, if the page doesnt have a thumbnail then it should fallback to the default (services-top.jpg).

This code is working great in Chome and Firefox but IE9 is just showing a white background, its not even registering the fallback defautl image.

Anyone know why this isnt working?

Thanks

score 2 · Answer 1 · edited May 23 '17 at 11:49

PHP runs on the server. Your issue is that IE9 does not support linear-gradient. Quoting this answer:

The best cross-browser solution is

background: #fff;
background: -moz-linear-gradient(#fff, #000);
background: -webkit-linear-gradient(#fff, #000);
background: -o-linear-gradient(#fff, #000);
background: -ms-linear-gradient(#fff, #000);/*For IE10*/
background: linear-gradient(#fff, #000);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');/*For IE7-8-9*/ 
height: 1%;/*For IE7*/

score 0 · Accepted Answer · answered Jun 25 '14 at 11:18

Thanks for your answer @Mooseman

Your answer helped and I got the style functioning as wanted with this code:

.titlearea {
<?php if(has_post_thumbnail()): ?>
    /*IE7-*/ background:            url('http://example.com/default.jpg');
    /*IE8+*/ background:            url('http://example.com/default.jpg');
    background:                     -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
    background:                     -moz-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
    background:                     -ms-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
    background:                     -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
    background:                     linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?php echo $thumb_url ?>');
<?php else: ?>
    background:                     url('http://example.com/default.jpg');
<?php endif; ?>
    background-size:                cover;
    background-position:            50% 0;
}

Styles.php Conditional PHP / CSS not working in IE 9

2 Answers2