{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 狗以群分 的问题《How to use css linear gradients in IE10?》','https://www.manongdao.com/q-683979.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
In IE10, I am trying to create a css linear gradient, from the top of the page to the bottom of the page. This is what I have so far
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
<meta http-equiv="X-UA-Compatible" content="IE=10">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='./includes/js/jquery-2.0.0.min.js'></script>
<link rel='stylesheet' type='text/css' href='./includes/css/css.css'/>
<p id="title">
Test
</p>
</body>
</html>
css
body {
margin: 0px;
padding: 0px;
background-image: linear-gradient(to bottom, #dcdcdc 0%, #b0b0b0 100%);
}
#title {
color:red;
}
But it doesn't look the way I want it to look. This ends up with linear gradients that's about the height of 100px, then keeps repeating downwards. Similar to this image:
Does anyone know whats wrong?
This is not an issue with IE10 alone; in fact, it's by design.
Backgrounds have special behavior when applied to
bodyand/orhtml. When you apply a background tobodywithout touchinghtml, what happens is that the body background gets propagated to the viewport, and that background acts as if it were declared onhtml:Even though it appears otherwise, the
htmlandbodyelements don't actually start with an intrinsic 100% height (except in IE in quirks mode); rather they take the height of their contents, just like any other block boxes. This meanshtmlis the same height as the combined height of yourpelement and its default margins (which are collapsed with thebodyelement).While gradient backgrounds are designed to stretch across the full height and width by default, the actual height of
htmldoesn't allow enough room for a gradient to cover the entire viewport by itself, so it only stretches to a certain height before it starts repeating. AFAIK, this behavior is consistent across all browsers that implement gradients according to the latest standard.If you want to make the gradient stretch across the whole viewport even if there isn't enough content for the whole page, simply add this rule:
If you want, you can move the background styles from
bodytohtmlas well, but as long as you only set a background on one of those elements at a time, it doesn't make a difference which one you apply it to.This fixed posted below helped me. Just add
I know this is an old post but i am pretty sure people still struggle with this i tried adding a linear gradient and was not working till i found out if i the background-attachment property it works.