0

Есть код:

body{
  position: relative;    
}
body::before {    
    background-size: cover; 
    content: ' ';
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    will-change: transform;
    z-index: -1;
}

Если я добавляю класс с изображением, то все отлично - оно фиксировано и никуда не двигается, а если с градиентом, то почему-то перемещается.

Градиент:

 body.gradient2 {       
    background: rgb(208,228,247);
    background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 100%, rgba(135,188,234,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
    background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
}

Изображение:

body.newyear_night {
  background-image: url("/images/fon/43.jpg");    
}

Добавляю класс я вот так:

document.body.classList.add('gradient2');
document.body.classList.add('newyear_night');
2
  • 1
    что значит перемещается? вы можете воспроизвести проблему в фидл? 5 июн 2017 в 9:34
  • т.е. прокручивается вместе с текстом.. и получается некрасиво в итоге. Как сказать.. ну вот если бы это был не градиент, а простая картинка. И прокручивая текст картинка-фон также перемещалась, а внизу создавалась новая..
    – user250973
    5 июн 2017 в 9:38

2 ответа 2

0

document.body.classList.add('gradient2');
html {
  height: 1000px; /*100% для динамики*/
}
body{
  background-size: cover;
}
body.gradient2 {       
    background: rgb(208,228,247);
    background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 100%, rgba(135,188,234,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
    background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
}

2
  • не работает.. также повторяется.. почему-то картинки вот фиксированы, а градиент нет
    – user250973
    5 июн 2017 в 10:07
  • "Использование background-attachment : fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов." но у меня как раз-таки нет "background-attacment" и картинки занового не прорисовываются, в отличие от градиента
    – user250973
    5 июн 2017 в 10:10
0

Проблема решена. Решение очень простое - необходимо добавлять класс не к body, а к body::before вот таким образом:

body.gradient2::before {       
    background: rgb(208,228,247);
    background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 100%, rgba(135,188,234,1) 100%); 
    background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
    background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 100%,rgba(135,188,234,1) 100%); 
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.