html - Background-image moving partially out of window when specified with background-position: center; -


i have following html code:

<!doctype html> <html lang="en"> <head>     <meta charset="utf-8">     <title>document</title>     <link rel="stylesheet" type="text/css" href="1.css"> </head> <body>  <body> 

my css code follows:

body {     background-image: url(tree.png);     background-repeat: no-repeat;     background-position: center; } 

now google chrome browser shows following output:

enter image description here

here, image tree @ top center , partially out of window.

to rectify change css code following:

body {         background-image: url(tree.png);         background-repeat: no-repeat;         background-position: center;         margin-top: 600px;     } 

now browser shows following output:

enter image description here

my question why have add margin @ top , background-image not default going center of browser page?

it's related height of document. without content, body height @ it's minimum. if change css following, background image should central:

html {     background-image: url(tree.png);     background-repeat: no-repeat;     background-position: center;     height:100%; } 

https://jsfiddle.net/z85ony88/

furthermore, if need background image on body. use following:

html {   height:100%; } body {     background-image: url(https://jsfiddle.net/img/logo.png);     background-repeat: no-repeat;     background-position: center; } 

Comments

Popular posts from this blog

Sort a complex associative array in PHP -

vb.net - How to ignore if a cell is empty nothing -

recursion - Can every recursive algorithm be improved with dynamic programming? -