Mikk Poles Mikk Poles - 4 months ago 8
HTML Question

Simple CSS issue - Blank space above

I am working on a coming soon page here: http://desertcinema.com/jheck/

However I run into some issue with regards an extra space at the top of my

<div class="background-filter"></div>
element.

enter image description here

Basically I have this CSS for this part:

.background-filter {
width:100%;
height:100%;
display:block;
position:fixed;
background: #000;
opacity: 0.5;
z-index:0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


I am wondering what is the reason why I have space at the top. This div must cover up the whole thing of the space with no spaces.

Any idea what's causing this and how to fix it? You can use CHROME INSPECT ELEMENT for the play.

Answer

Just add style top: 0; to .background-filter.

The position of an element does not default to 0,0. It's position is set by default relative to the containing element.

Comments