css - html on tumblr div height not behaving -


i've got html css, in fact:

<html>   <head>     <title>{title}</title>   </head>   <style>   html {       background-image: url('http://i.imgur.com/9svrabs.jpg');       -webkit-background-size: cover;       -moz-background-size: cover;       -o-background-size: cover;       background-size: cover;   }   header {       width: 100%;       height: 100%;       position: relative;       background-image: url('http://i.imgur.com/5rvc2sw.png');   }   h1 {       font-family: 'montserrat', 'helvetica neue', "arial", sans-serif;   }   #title {       margin: auto;       display: inline-block;       width: 100%;       text-align: center;   }   #navigation {       display: inline-block;   }   </style>   <body>     <header>       <div id='navigation'>         <a href='/art'>art</a><br><br>         <a href='/music'>music</a>       </div>       <div id='title'>         <h1>{title}</h1>         {block:description}             {metadescription}         {block:description}       </div>     </header>   </body> </html> 

which looks when test in browser: enter image description here

which intended, when copy , paste exact same code in tumblr's 'edit html', this: enter image description here

the header div not following specified 'height:100%' , being cut short after content finished.

i don't understand what's happening since version works fine exact same not work on tumblr. there special need specify make div height 100%?

this default margin of body coming browser's stylesheet.

add css

body { margin: 0} 

ref: default browser styles


Comments

Popular posts from this blog

c++ - llvm function pass ReplaceInstWithInst malloc -

java.lang.NoClassDefFoundError When Creating New Android Project -

Decoding a Python 2 `tempfile` with python-future -