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

enter image description here

codingrose · Accepted Answer · 2014-08-01 10:45:25Z

3

Just add:

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

to your css.

Updated fiddle here.

answered Aug 1, 2014 at 10:45

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Umayr · Accepted Answer · 2014-08-01 10:56:27Z

2

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.

edited Aug 1, 2014 at 10:56

answered Aug 1, 2014 at 10:50

Umayr

9331 gold badge10 silver badges19 bronze badges

Comments

4dgaurav · Accepted Answer · 2014-08-01 10:49:34Z

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

}

Collectives™ on Stack Overflow

CSS3 gradient background not working properly

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related