Как сделать фоновое изображение адаптивным в Material UI ⇐ CSS

[Anonymous]

Я пытаюсь решить проблему с фоновым изображением при изменении размера браузера. В моем приложении высота фонового изображения установлена ​​на «100vh», которая заполняет всю страницу. Когда я изменяю размер браузера на меньшую ширину, фоновое изображение обрезается. Изменение высоты на «100%» исправляет это, когда страница отзывчива, НО 100% показывает, что изображение обрезается, когда я возвращаюсь к обычному размеру рабочего стола, потому что оно заполняет фон только размером с div.
Я использую пользовательский интерфейс Material. Как мне быстро изменить размер фона?

DOM

Код: Выделить всё

return 

CSS[/b]

Код: Выделить всё

content: {
flexGrow: 1,
padding: theme.spacing(3),
height: '100vh',
textAlign: 'center',
backgroundImage: `url(${Background})`,
backgroundRepeat: "no-repeat",
backgroundPosition: "center center",
backgroundSize: "cover",
backgroundAttachment: "fixed",
},

Я попробовал добавить это в свой класс стиля контента, но это не помогло

Код: Выделить всё

[theme.breakpoints.down('lg')]: {
height: '100%'
}

Есть предложения? Спасибо

Подробнее здесь: https://stackoverflow.com/questions/565 ... aterial-ui