CODEWITHSUNDEEP
css
G.L.P
G.L.P

Reputation: 7207

CSS3 gradient background not working properly

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

enter image description here

Upvotes: 1

Views: 1190

Answers (3)

Umayr
Umayr

Reputation: 933

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.

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11496

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%);

}

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Just add:

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

to your css.

Updated fiddle here.

Upvotes: 3

Related Questions