Heiko Matthies Heiko Matthies - 3 months ago 7
CSS Question

Scrolling not possible on own Website

At the moment, I have the following settings in my CSS-Stylesheet:

.Body {
background-color: #303030;
background-image: url("Background.png");
background-attachment: scroll;
background-size: cover;
display: block;
background-position: top;
background-repeat: no-repeat;
}

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="Body">
<div>
<img class="Header" src="Header.png">
</div>
</body>


I made these settings to assure that the background is responsive which perfectly works right now.
But I have the problem that I can't scroll down the page which means that no scrollbar is shown.
Otherwise, when I set the width of the image to 100% and my height to 6572px, everything works perfectly
BTW: My image resolution is 1920 x 6572.

PS: I must apologize for my weird English, but it isn't my native language

Answer

** UPDATED

Try adding a

<img class='im' src='Background.png'>

right after body tag with css:

body {
    margin: 0;
    overflow-x: hidden;
}
.im{
    position:absolute;
    top:0;
    width:100%;
    height: auto;
    z-index:-1;
    ...
}

** UPDATED 2

Here you have a working example: https://codepen.io/jjyepez/pen/AXNorQ

Comments