[Помогите] Градиент в фиксированном фоне (css) на сайте на устройствах android и т.д.

serguspl · 19 май 2015

Вот такой код. На устройствах с android отображается "background-color: #0000ff".

Спойлер CSS

HTML:

  background-color: #0000ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#0000ff)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image: -webkit-linear-gradient(top, #ff0000, #0000ff); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
  background-image: -moz-linear-gradient(top, #ff0000, #0000FF); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(top, #ff0000, #0000FF); /* IE 10+ */
  background-image: -o-linear-gradient(top, #ff0000, #0000FF); /* Opera 11.10+ */
  background-image: linear-gradient(to bottom, #ff0000, #0000FF);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #0000FF));
  background-attachment: fixed;
  background-repeat:no-repeat;

Димаська · 19 май 2015

поясните дураку,что значит это всё в общих чертах..очень нужно научиться градиент в коде прописывать

alexbelkevich · 20 май 2015

serguspl сказал(а): ↑

Вот такой код. На устройствах с android отображается "background-color: #0000ff".

Спойлер CSS

HTML:

  background-color: #0000ff;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#0000ff)); /* Safari 4-5, Chrome 1-10, iOS 3.2-4.3, Android 2.1-3.0 */
  background-image: -webkit-linear-gradient(top, #ff0000, #0000ff); /* Chrome 10+, Safari 5.1+, iOS 5+, Android 4+ */
  background-image: -moz-linear-gradient(top, #ff0000, #0000FF); /* Firefox 3.6+ */
  background-image: -ms-linear-gradient(top, #ff0000, #0000FF); /* IE 10+ */
  background-image: -o-linear-gradient(top, #ff0000, #0000FF); /* Opera 11.10+ */
  background-image: linear-gradient(to bottom, #ff0000, #0000FF);
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #0000FF));
  background-attachment: fixed;
  background-repeat:no-repeat;

Нажмите, чтобы раскрыть...

градиенту background-color попробуйте поставить, а то у вас background-image стоит

serguspl · 20 май 2015

alexbelkevich, "background-color" - вообще градиент не прописывает, на сколько я понимаю правильно..
Пробивал и просто "background" ..все равно.
http://space.hrysem.tk/ - вот сайт где это хочу сделать

Спойлер Скрины андроид

Progressor · 21 май 2015

попробуйте подобную конструкцию
background: no-repeat scroll 0px 0px linear-gradient (to bottom, rgba(106,111,123, 0.75) 0%,rgba(8,13,25, 0.75) 100%);

serguspl · 23 май 2015

Progressor, тоже самое.
Заметил если убрать background-attachment: fixed; то градиент есть и на андроиде, только ж не фиксированый..(

dwm · 23 май 2015

мне чисто для себя... залей скрин сюдой.
и на афоне заскринь, если есть возможность.

serguspl · 23 май 2015

dwm,
http://space.hrysem.tk/ - вот сайт где это хочу сделать
градиет сверху вниз, красный в синий. на скринах только красный

Спойлер Скрины андроид

На айфоне нету возможности

Progressor · 12 июн 2015

Ещё вариант такой: сделайте div назовите его background к примеру, уже в нем пропишите градиент и position: fixed; соответственно с параметрами width: 100%; height: 100%;

Klever_V · 7 июл 2015

Progressor сказал(а): ↑

Ещё вариант такой: сделайте div назовите его background к примеру, уже в нем пропишите градиент и position: fixed; соответственно с параметрами width: 100%; height: 100%;
Нажмите, чтобы раскрыть...

Вот это я и подразумевал под отдельным элементом, да. Но может ехать на старых браузерах, например.