CODEWITHSUNDEEP
htmlcssscrolloverflow
Spotify Bruger
Spotify Bruger

Reputation: 45

Scroll doesn't work

So I have this page, with a background image, that fill up 100 % of the page. The problem is that now my scroll doesn't work, which gives problems on small screens, because the user then not are able to view the content at the bottom of the page.

CSS CODE:

html, body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#background{
position:absolute;
height:100%;
width: 100%;
margin: 0;
padding: 0;
}

#css{
position: absolute;
z-index: 2;
top:5%;
left: 1%;
right: 1%;
overflow: auto;
height: 100%;
line-height:1.5;
}

HTML CODE

<body>
<div>
    <img id="background" src="background.png" />
</div>

<div id="css">
<center>
<img src="logo.png"><br><br>

TEXT LINE 1<br>
TEXT LINE 2<br>
TEXT LINE 3<br>
TEXT LINE 4<br>

</center>
</div>
</body>

Upvotes: 1

Views: 5281

Answers (5)

Faridzs
Faridzs

Reputation: 672

You have used : overflow: hidden; for your html and body.

So you wont be able to scroll!

Upvotes: 3

Joum
Joum

Reputation: 3245

You are using the overflow: hidden setting in your CSS.

According to the W3C, when using this setting:

The overflow is clipped, and the rest of the content will be invisible

This also implies that you not only not see the scrollbar, as the browser will also not allow you to scroll in that element.

So the answer to your question is: simply remove that CSS rule.

Upvotes: 1

Pooshonk
Pooshonk

Reputation: 1324

Remove overflow:hidden from your html,body css and add the following

body
{
    background: url('background.png') no-repeat;
}

Upvotes: 1

Kees Sonnema
Kees Sonnema

Reputation: 5784

You have to set the background in your CSS not in the html. set a background like this:

body{
background: url('background.png');
}

You can also use repeat and size options:

background-repeat: no-repeat;
background-size: cover;

I used a background-color as example here:

JSFIDDLE

Upvotes: 0

Modestas Stankevičius
Modestas Stankevičius

Reputation: 144

<div>
    <img id="background" src="background.png" />
</div>

this should go into background. in css body{background: url('background.png') no-repeat;} and so.

Upvotes: 0

Related Questions