Home/ Questions/Q 8810907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T03:13:58+00:00

I’m creating website and I ran into a problem with internet explorer (tested on

  • 0

I’m creating website and I ran into a problem with internet explorer (tested on ver. 8) where it doesn’t display background image for

this is my code:

    body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

Any idea how to address this issue?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check out this fiddle for the example. I don’t know whether you want like this or not. But its working on IE as well. Check it. Example

     body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

    Here, I added the following line.

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */

    Check it and let me know. Thanks

    • 0