Фоновый градиент повторяется, когда высота документа больше, чем высота окна

Question

Я ищу, чтобы у меня был фоновый градиент на моей веб-странице. Когда высота документа меньше высоты окна, я вижу один градиент на всей странице. Однако, когда высота документа больше высоты окна, градиент начинает повторяться, когда я начинаю прокручивать вниз. Я хотел бы знать, есть ли способ избавиться от этого и иметь постоянный неповторяющийся градиент на всей странице.

Для того, чтобы быть четким, высота окна - это фактическая высота окна браузера, а высота документа - это фактическая высота веб-страницы со всем стилем. Посмотрите на следующий код:

html 
{ 
    height: 100%; 
    width: 100%; 
    margin: 0% 0%; 
    padding: 0% 0%; 
    border: 0px; 

    /* Background size */ 
    -webkit-background-size: cover; 
    -moz-background-size: 100% auto; 
    -o-background-size: cover; 
    background-size: 100% auto; 

    /* Background color */ 
    background: -webkit-linear-gradient(#FFEE00, #FFD300); 
    background: -o-linear-gradient(#FFEE00, #FFD300); 
    background: -moz-linear-gradient(#FFEE00, #FFD300); 
    background: linear-gradient(#FFEE00, #FFD300); 
    background-color: #FFEE00; 
} 


body 
{ 
    width: 100%; 
    height: 100%; 
    margin: 0% auto; 
    padding: 0% 0%; 

    display: inline-block; 
    clear: both; 

    font-family: "Gill Sans", sans-serif; 
    color: #000000; 
    text-align: center; 
} 

Я прочитал ответ, который предложил исключить height: 100%; строки из обоих html и body классов, но когда я делаю, что градиент просто заканчивается, когда высота документа заканчивается. Когда высота документа меньше высоты окна, в оставшейся части окна есть только пробел, и это не то, что я ищу.

Answer 1

Это работает для меня, и я видел, что это работает для других, чтобы дать ему попробовать, но где вы используете

background: -webkit-linear-gradient(#FFEE00, #FFD300); 

в вашем HTML, добавьте «фиксированные» до конца, так это выглядит например:

background: -webkit-linear-gradient(#FFEE00, #FFD300) fixed; 

Остальная часть кода остается неизменной. Надеюсь это поможет!

~ Люк

Answer 2

Фиксированные с background-attachment: fixed;

пса: снятым ненужным свойством, как color:#000000, который по умолчанию.

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

 

 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
    font-family: "Gill Sans", sans-serif; 
 
    text-align: center; 
 
    background: -webkit-linear-gradient(#FFEE00, #FFD300); 
 
    background: -o-linear-gradient(#FFEE00, #FFD300); 
 
    background: -moz-linear-gradient(#FFEE00, #FFD300); 
 
    background: linear-gradient(#FFEE00, #FFD300); 
 
    -webkit-background-size: 100% 100%; 
 
    -moz-background-size: 100% 100%; 
 
    -o-background-size: 100% 100%; 
 
    background-size: 100% 100%; 
 
    background-attachment: fixed; 
 
}

<p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p><p>t</p>