0

I try to get this background work in IE11. I can't see the fault… does anybody know what is wrong with this?

  background: linear-gradient(to right, red 1px, transparent 1px), linear-gradient(to bottom, red 1px, transparent 1px);
  background-size: 60px 30px;

Fiddle: https://jsfiddle.net/201gyf6L/

Thanks

–––– UPDATE ––––

I found a work around for IE11.

background: linear-gradient(left, red 1px, transparent 1.1px), linear-gradient(top, red 1px, transparent 1.1px);

I updated "to right" to "left" and "to bottom" to "top" and, important, wrote 1.1px instead of 1px. Kinda ugly, but works.

chrs
  • 159
  • 1
  • 8
  • 2
    Possible duplicate of [How to make background-image with linear-gradient work on IE 11?](https://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-gradient-work-on-ie-11) – rubentd Nov 06 '18 at 15:33
  • I'd recommend you to use a gradient generator and you'll get a lot of code for other browsers too http://www.colorzilla.com/gradient-editor/ – arieljuod Nov 06 '18 at 16:06
  • Even don't work with -ms- prefix :( – chrs Nov 06 '18 at 16:06

1 Answers1

0

Try to use the following code:

<head>
    <meta charset="utf-8" />
    <title></title>
   <style type="text/css">
       div {
           width: 420px;
           height: 720px;
           background-color: white;
           background-image: linear-gradient(red 2px, transparent 2px), 
               linear-gradient(90deg, red 2px, transparent 2px), 
               linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), 
               linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
           background-size: 60px 30px;
       }
   </style>
</head>
<body>
    <div>
    </div>
</body>

The output as below (using IE 11.1.17134.0 version):

enter image description here

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • Okay, this is interesting. I tried this with 2px and it worked. But with 1px it does not. Sadly, I need it with 1px. `background: linear-gradient(red 2px, transparent 2px), linear-gradient(90deg, red 2px, transparent 2px); background-size: 60px 30px;` – chrs Nov 07 '18 at 09:10