Почему не применяется градиент?

[Hasiev]

Не получается установить градиент для body ..

JsFiddle: https://jsfiddle.net/Hasiev/3tqas2ep/

Edited December 21, 2016 by Hasiev
Правка ссылки

[by chris]

@Hasiev, сам документ не растянут

html {
  height: 100%;
}

и правильнее так

background-image: radial-gradient(green, red) ;

 

[npofopr]

html {
  width: 100%;
  height: 100%;
}

 

[npofopr]

Не надо нам такого наставника)) 

[Hasiev]

Благодарю, долго мучался с этим, оставлял на потом, и вот накипело ))

@npofopr, а можно так писать? : 

 

html,
body {
	width: 100%;
	height: 100%;
	background: radial-gradient(red, green) ;
}

 

Edited December 21, 2016 by Hasiev

[flarian]

Hasiev - Градиенты пишутся вот так: а ещё правильней использовать less с набором собственных миксинов.

background-color:#55ddff;
background-image:-webkit-linear-gradient(top, #55ddff, #0081b5);
background-image:-moz-linear-gradient(top, #55ddff, #0081b5);
background-image:-o-linear-gradient(top, #55ddff, #0081b5);
background-image:linear-gradient(to bottom, #55ddff, #0081b5);

Нужна будет помощь в наставлениях пиши...

[SelenIT]

4 минуты назад, flarian сказал:

background-image:-moz-linear-gradient(top, #55ddff, #0081b5);
background-image:-o-linear-gradient(top, #55ddff, #0081b5);

Зачем??? В преддверии 2017-го года-то?..

И вопрос вроде был про радиальный градиент, а не про линейный.

[flarian]

SelenIT - сори не заметил про радиальный, о том в чём нету смысла в 2016 я промолчу...

npofopr - самоуверенно!

html, body{
	width: 100%;
	height: 100%;
	background: radial-gradient(#55ddff, #0081b5) ;
}

 

Edited December 22, 2016 by flarian

[npofopr]

2 минуты назад, flarian сказал:

SelenIT - сори не заметил про радиальный, о том в чём нету смысла в 2016 я промолчу...

npofopr - самоуверенно!

html, body{
	width: 100%;
	height: 100%;
	background: radial-gradient(#55ddff, #0081b5) ;
}

 

а зачем градиент и для html и для body?

[Hasiev]

Если кому понадобится ..

html,
body {
    width: 100%;
    height: 100%;
}
body {
  background-image: ;
}