How to use css linear gradients in IE10?


Tags: css,internet-explorer-10,linear-gradients

Problem :

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:

enter image description here

Does anyone know whats wrong?



Solution :

This is not an issue with IE10 alone; in fact, it's by design.

Backgrounds have special behavior when applied to body and/or html. When you apply a background to body without touching html, what happens is that the body background gets propagated to the viewport, and that background acts as if it were declared on html:

For documents whose root element is an HTML HTML element or an XHTML html element: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element.

Even though it appears otherwise, the html and body elements 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 means html is the same height as the combined height of your p element and its default margins (which are collapsed with the body element).

While gradient backgrounds are designed to stretch across the full height and width by default, the actual height of html doesn'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:

html {
    min-height: 100%;
}

If you want, you can move the background styles from body to html as 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.


    CSS Howto..

    Php - Javascript - How do I know which pages are in color and which are in black and white?

    How to add CSS style to focused anchor in HTML

    How to create a full screen div on landing page

    How to manage text breaks in span using js, css or anything else

    How to give a nested HTML table cell a transparent background?

    hide show div using nav html5 query javascript

    How would I go about applying some sort of dynamic range counter to jQuery and CSS?

    How can I display social media icons in a horizontal line instead of vertical row

    How to prevent a span from breaking into the next line - responsive webdesign?

    How to minified all js and css files using gruntfile.js in sails.js

    Show 1 row on desktop and 2 rows on mobile

    How to make a ghost element in CSS?

    How to set align of elements to center with css?

    what is shape-id and how can I find it in a css file?

    How to set opacity for background images using css?

    How to remove div backgrounds?

    How to fit images into keeping the exact size of

    How to hide autofill safari icon in input field

    how to apply jquery ui/css to forum field

    How to get the CSS style from Inspect Element

    How to background css with php variable

    How can I adjust the margins of quote symbols added with CSS

    How do I prevent my dropdown from closing when clicking inside it?

    How can I replace text value to star

    How to make circles repeat in the background of an element in full CSS?

    Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat

    How do I create an oval around text in CSS?

    How to create a table with fixed layout?

    how to change a css of an input if the value of it is not empty in angularJS

    Showcase the first n-items in a bootstrap grid