2016-09-05 6 views
0

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

body { 
    width: 100%; 
    height: 100%; 
    background: #034b52 url(../../themes/images/bg.jpg) no-repeat center fixed; 
    color: #fff; 
} 

body:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; 
    background: linear-gradient(to bottom, rgba(3, 75, 82, 1) 0%, rgba(3, 75, 82, 0) 100%); 
    content: ''; 
    z-index: -1; 
} 
+0

http://stackoverflow.com/questions/18094134/fixed-gradient-background -with-css использовать background-attachment: fixed; на теге тела и применить тег background to body – abhirathore2006

ответ

-1

Попробуйте

body{ 
 
    background: url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue); 
 
height:100%; 
 
    
 
} 
 
html{height:100%;}
<body> 
 
here we go 
 
</body>

1

Примените следующий CSS:

body { 
    background: linear-gradient(to bottom, rgba(3,75, 82, 1) 0%, rgba(3,75, 82, 0) 100%); 
    height: 100%; 
    margin: 0; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
} 
Смежные вопросы