Фоновое изображение исправлено и прокрутка текста бесконечна в css

Question

Я пытался создать окно чата, в котором у меня есть фоновое изображение, и я установил минимальную высоту экрана как «100vh». Я просто хотел, чтобы фоновое изображение фиксировалось на бесконечной прокрутке текста, код (как я использовал React jS, так что дизайн CSS находится в переменной messageContainer )

import React, { useContext } from 'react'
import Header from './Header';
import { UserNameContext, RoomNameContext } from '../UserContext'
import background from './chatBackground.jpg';
export default function ChatRoom() {

    /*const { userName, setUserName } = useContext(UserNameContext);
    const { roomName, setRoomName } = useContext(RoomNameContext);*/
    const messageContainer = {
        backgroundImage: `url(${background})`,
        backgroundRepeat: 'repeat-y',
        backgroundAttachment: 'fixed',
        backgroundPosition: 'center center',
        minHeight:'100vh',

    }
    return (

        <div>
            <Header />
            <div style={messageContainer}>
                <div className="opponent msg">
                    <p>Hey! how are you please let me know how is it going</p>
                </div>
                <div className="own msg">
                    <p className="text">Hey! how are you please let me
                    </p>
                </div>
                <div className="opponent msg">
                    <p>Hey! how are you please let me know how is it going</p>
                </div>
                <div className="own msg">
                    <p className="text">Hey! how are you please let me
                    </p>
                </div>
                <div className="opponent msg">
                    <p>Hey! how are you please let me know how is it going</p>
                </div><div className="opponent msg">
                    <p>Hey! how are you please let me know how is it going</p>
                </div>
                <div className="own msg">
                    <p className="text">Hey! how are you please let me
                    </p>
                </div><div className="own msg">
                    <p className="text">Hey! how are you please let me
                    </p>
                </div>
            </div>
        </div>
    )
}

Окно моего сообщения CSS код

    .opponent
    {
      background-color: #007bff;
      max-width: 80%;
      color:white;
      float:left;
      margin-left: 5px;
      text-align: left;
    }
    .own
    {
      background-color: #c3c7cc;
      max-width: 80%;
      color:black;
      float:right;
      margin-top: 1rem;
      margin-right: 5px;
      text-align: right; 
    }
    .msg{
      margin-top: 1rem;
      border-radius: 10px;
      padding:2vh;

    }