Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing conditional CSS to dislay gradient image to IE
    primarykey
    data
    text
    <p>I've never used conditionals before (but knew I would eventually have to -- I hate you IE). Basically, I have a banner at the top of my website using a css gradient:</p> <pre><code>background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, #2B7BB8), color-stop(0.72, #4394CE), color-stop(0.86, #58A8E1) ); </code></pre> <p>So I added a conditional statement to load a gradient image I prepared in the GIMP for all versions of IE:</p> <pre><code>&lt;!--[if IE]&gt; background-image:url('img/ieback.png'); &lt;![endif]--&gt; &lt;!--[if IE]&gt; background-repeat:repeat-x; &lt;![endif]--&gt; </code></pre> <p>I don't have IE on my computer (linux) so I used Adobe Browser Labs to test what my website looks like in IE. However, the image still doesn't load. The final version of my css looks like this:</p> <pre><code>background-image: linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -o-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -moz-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -webkit-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -ms-linear-gradient(bottom, #2B7BB8 44%, #4394CE 72%, #58A8E1 86%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.44, #2B7BB8), color-stop(0.72, #4394CE), color-stop(0.86, #58A8E1) ); &lt;!--[if IE]&gt; background-image:url('img/ieback.png'); &lt;![endif]--&gt; &lt;!--[if IE]&gt; background-repeat:repeat-x; &lt;![endif]--&gt; </code></pre> <p>Am I doing something wrong?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload