CODEWITHSUNDEEP
htmlcss
asiammyself
asiammyself

Reputation: 219

Div adding scroll bars even with overflow: hidden

What I'm trying to do is have a full screen background with a radial image over it with no scroll bars. Right now it kind of works. By that I mean that the div with the radial gradient(img) adds a scroll bar even with overflow: hidden. 

html { 
background: url(background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover
}


#glow{
width:1043px;
height:763px;
position:absolute;
left:50%;
top:50%;
background-image: url('outer_glow.png');
margin-left:-543px; /* Negative half the width*/
margin-top:-381px; /* Negative half the height */
overflow: hidden;
}

What i'm trying to do is if the image radial is too big to just cut it off and center it. But currently it still shows a vertical bar in my browser. html below

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="styleit.css" rel="stylesheet">
<title>Title</title>
</head>
<body>
<div id="glow"></div>
</body>
</html>

Upvotes: 2

Views: 1057

Answers (1)

4lbertoC
4lbertoC

Reputation: 243

The problem here is that you are not taking into account that the last node in the DOM tree is the body element.

What happens is that, when you resize the window, the body sees that its children is big than itself, and so it shows the scrollbars.

Try adding this to your CSS:

body {
  overflow: hidden;
}

Upvotes: 1

Related Questions