-2

The issue is that the CSS gradient I am using as part of the background is repeating after every 120 pixels instead of taking up the whole page length. After careful experimentation, I believe that I have figured out that the issue is that Internet Explorer 11 thinks that the page length is only 120px. I am not getting this problem with Edge, Firefox or Chrome (though I was told that Chrome does have the same problem but the CSS is coded in such a way that it is ignoring the perceived page height).

Is there a way I can modify the CSS to tell Internet Explorer that the page length is not 120px?

Relevant data:

The existing code relating to the gradient is:

body{background: #fdb6b4; /* Old browsers */ 
background: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
background: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
background: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
background: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
background: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0 ); /* IE6-9 */}

Link to the blog in question to see exactly what the issue is: http://www.http://madinskincareland.com

above: how IE11 renders, below: how Firefox 51.0.1 renders (all other tested browsers including available mobile devices render properly)

image

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
Timothy Kemp
  • 17
  • 1
  • 1
  • Possible duplicate of [How to make background-image with linear-gradient work on IE 11?](http://stackoverflow.com/questions/19980079/how-to-make-background-image-with-linear-gradient-work-on-ie-11) – pol Feb 19 '17 at 15:35
  • Try this http://www.colorzilla.com/gradient-editor/ – Rahul Feb 19 '17 at 15:41
  • I got the code for it from colorzilla – Timothy Kemp Feb 19 '17 at 17:33
  • And the code does work, but on IE11 it is restricted to a height of 120px instead of, as on other browsers including Edge, the full height of the page. – Timothy Kemp Feb 19 '17 at 17:33

2 Answers2

0

According to CSS/linear-gradient documentation, you need to use background-image. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

body{
  background-color: #fdb6b4; /* Old browsers */ 
  background-image: -moz-linear-gradient(top, #ffdadd 0%, #fdb6b4 100%); /* FF3.6-15 */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdadd), color-stop(100%,#fdb6b4)); /* Chrome4-9,Safari4-5 */ 
  background-image: -webkit-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Chrome10-25,Safari5.1-6 */ 
  background-image: -o-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* Opera 11.10-11.50 */ 
  background-image: -ms-linear-gradient(top, #ffdadd 0%,#fdb6b4 100%); /* IE10 preview */ 
  background-image: linear-gradient(to bottom, #ffdadd 0%,#fdb6b4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdadd', endColorstr='#fdb6b4',GradientType=0 );
}
Milo Kang
  • 130
  • 8
0

I have had the same problem with applying the gradient to the body tag. What I do is add another tag (e.g. Main or section) inside of the body, position it relative top 0, left 0, and then apply the gradient to that element. I hope this helps!

Derreck
  • 158
  • 9