CODEWITHSUNDEEP
css
zhekaus
zhekaus

Reputation: 3194

How to stick a div with background image to the top of the body that has padding-top?

I need a div with background image and this div must been stick to the top. However, body has padding-top = 80px. The problem is that body’s padding cuts 80px of the div’s background image and I see a white strap at the bottom of the page. How to get rid of this white strap and see the whole div’s background image? Here is an illustration of the problem:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            padding-top: 80px;
            margin: 0;
        }

        .divider-div {
            min-height: 250px;
            background-image: url(https://c1.staticflickr.com/5/4095/4913282297_671ae41f57_b.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
<div class="divider-div"></div>
</body>
</html>

Upvotes: 1

Views: 1723

Answers (1)

zhekaus
zhekaus

Reputation: 3194

Wow. I've found a solution by chance... I need to add these lines to .divider-div style

   top: 0;
   position: fixed;

Upvotes: 1

Related Questions