Home/ Questions/Q 8297631
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T15:29:03+00:00

I have 1 div and i want to apply a gradient and a background

  • 0

I have 1 div and i want to apply a gradient and a background image to it (yes, on the same element). I know that it’s only possible if the browser you`re targeting is NOT IE. With that in mind, i thought of applying a solid color in stead of the gradient with an image on top of it for IE only.

Here is my code:

background: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat, repeat;
<!--[if IE]>
background: #000 url(../images/newsletter.png) center left no-repeat;
<![endif]-->

The problem is the condition is ignored, before or after the declaration for FF/Chrome. (i`ve tested the and also the [if false] etc.)
Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t put that kind of conditional in CSS; it goes in your HTML. So create a new stylesheet with the IE fix, and link to it in a conditional comment:

    <!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

    for example. However, that’s in general; you can rewrite what you have now as:

    background-color: black;
background-image: url(../images/newsletter.png);
background-image: url(../images/newsletter.png), -moz-linear-gradient(top, rgb(10,10,01) , rgb(5,5,5));
background-image: url(../images/newsletter.png), -webkit-gradient(linear, left top, left bottom, from(#0a0a0a), to(#05050f));
background-repeat: no-repeat;

    which degrades gracefully without ugly conditional comments, and doesn’t exclusively degrade gracefully on Internet Explorer.

    • 0