CODEWITHSUNDEEP
htmlcssbackground-image
S. Ong
S. Ong

Reputation: 5

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>

Upvotes: 0

Views: 1585

Answers (4)

ram12393
ram12393

Reputation: 1258

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

Upvotes: 1

Sakkeer A
Sakkeer A

Reputation: 1100

Put your background image to your body.

And Another solution is : Set overflow into your .bg Class overflow-x:auto;

<!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>

        body{
        background-image: url("images/background.jpg");

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

        html, body {
        height: 100%;
        margin: 0;
        }
        .bg{
        height: inherit;

        }

    </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>

Upvotes: 0

Hiren Patel
Hiren Patel

Reputation: 1157

Check This Just give class "bg" to body instead of div

or just add

overfloaw:scroll

in bg class

<!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("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
       background-size: cover;
       background-attachment: fixed;
       background-position: right top;
   
        }

    </style>
</head>
<body class='bg'>
<div >
    <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>

<!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("https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png");
       background-size: cover;
       background-attachment: fixed;
       background-position: right top;
       overflow:scroll;
        }

    </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>

Upvotes: 0

Paul Janubas
Paul Janubas

Reputation: 136

Remove the height 100% in html, body and remove the height: inherit; in .bg. That should work.

Upvotes: 0

Related Questions