HTML background-attachment: fixed. The background gets covered up after scrolling

I'm basically trying to create a background image whereby it will stay fixed in position forever. However, it seems that if the div internally has too much content and I scroll down, the image still does stay fixed but will become "covered" the more I scroll down.

View at the very top of the page looks totally fine After scrolling down a little, the background starts to get covered (you can see the image is still fixed in position)

Code snippet is as below. I've added loads of new lines in the inner div to show the problem

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 4 Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;
        background-image: url("images/background.jpg");

        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        }

    </style>
</head>
<body>
<div class="bg">
    <div class="container">
    <h1>My First Bootstrap Page</h1>
    <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>LOL</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
        <p>This is some text.</p>
    </div>
</div>
</body>
</html>

Solution

you need to add overflow:scroll; to the .bg class

bg {
    height: inherit;
    background-image: url(http://placekitten.com/200/300);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow:scroll; /* new selector added */
}

See the Live preview