Линейный градиентный фон от центра/середины

Question

Есть ли способ использовать линейный градиентный фон, который начинается с середины/середины экрана?

Это мой текущий CSS:

body { 
    display: table; 
    width: 100%; 
    height: 100%; 
    margin: 0 auto; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center top; 
    background-size: 800px; 
    background: blue; 
    background: -webkit-linear-gradient(to left, black, blue, blue, black 800px); 
    background: linear-gradient(to left, black, blue, blue, black 800px); 
} 

Gradient Б.Г. останавливается после 800px (что я хочу), но он находится на правой стороне экрана, а не за содержание веб-страницы. Я не могу переместить его нигде. Также он отображается на разных расстояниях от содержимого, в зависимости от размера окна. Мне нужно, чтобы это было зафиксировано в центре, за моим содержанием.

Возможно, что-то вроде следующей строки существует?

background: linear-gradient(to sides, blue, black 400px); 

Так что я должен был бы быть в состоянии установить начальное положение линейного градиента к центру, и пусть браузер запустить его с обеих сторон. 400px от центра, где он должен остановиться (и после этого использовать последний цвет) - так что в общей сложности 800 пикселей шириной должен быть градиент.

Answer 1

Если я понимаю ваш запрос правильно, это то, что вы хотите:

body, html { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 
body { 
 
    background-image: linear-gradient(to right, black, blue 400px, black 800px); 
 
    background-size: 800px 100%; 
 
    background-position: 50% 100%; 
 
    background-repeat: no-repeat; 
 
}

Answer 2

Попробуйте что-то вроде этого

background: linear-gradient(to left, black, blue 25%, blue 75%, black 100%); 

Использование процентов обеспечивает ваша страница будет масштабировать, и вы будете иметь левую и правую четверти вашего экрана черного цвета с середины половины сплошной синий!