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:
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:
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
Post a Comment