CSS3 gradient background not working properly

Question

I'm using CSS3 gradient, in local system its loading properly. once we uploaded that file its showing like stripe blocks with gradient.

Demo

CSS:

body {
    zoom: 1;
    opacity: 1;
     display:block;
    color: #333;
    font-size: 12px;
    height: 100%;
    min-height:100%;
    background-size: 100% /*Cover */;
    background: #e5dada;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZGFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top, #e5dada 0%, #ffffff 99%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e5dada), color-stop(99%, #ffffff));
    background: -webkit-linear-gradient(top, #e5dada 0%, #ffffff 99%);
    background: -o-linear-gradient(top, #e5dada 0%, #ffffff 99%);
    background: -ms-linear-gradient(top, #e5dada 0%, #ffffff 99%);
    background: linear-gradient(to bottom, #e5dada 0%, #ffffff 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5dada', endColorstr='#ffffff', GradientType=0 );
}

I tried background-size:contain / cover / 100%.. nothing worked

Answer 1

Demo

html, body {
    height: 100%;
    margin:0;
    padding:0;
}

.gradient {
    height: 100%;
    width: 100%;
    background: #e5dada;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZGFkYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

  /* Fallback (could use .jpg/.png alternatively) */
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  background-image: url(fallback-gradient.svg); 

  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image:
    -webkit-gradient(linear, top, bottom, from(#e5dada), to(#fff));

  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
  background-image:
    -webkit-linear-gradient(top, #e5dada 0%, #fff 99%);

  /* Firefox 3.6 - 15 */
  background-image:
    -moz-linear-gradient(top, #e5dada 0%, #fff 99%);

  /* Opera 11.1 - 12 */
  background-image:
    -o-linear-gradient(top, #e5dada 0%, #fff 99%);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
  background-image:
    linear-gradient(to bottom, #e5dada 0%, #fff 99%);

}

Answer 2

Just add:

html,body{
    height:100%;
    margin:0;
    padding:0;
}

to your css.

Updated fiddle here.

Answer 3

The background property depends on the height of the element. You didn't set height of your empty body therefore it results in those repeated tiny strips. The min-height property of body tag wouldn't work unless you set height: 100% of the parent tag i.e. html.

Working Fiddle.