html - Auto adjusting image -


i'm trying make simple webpage when open it, photo called "wallpaper.jpg" adjust based on window size there's no scroll bars. photo 1920 x 1080 if matters.

currently have:

<html>  <body bgcolor = "#000000">  <style>  img {  height:100%; width:100%;  }  </style>  <img src = "wallpaper.jpg">  </body>  </html> 

but it's still leaving vertical scrollbar

first things first:

  • don't use bgcolor deprecated,

  • you should reset margin on body because has margin:8px default (the value may change depending on browser), remove white space around.

then using img going have vertical scrollbar if img height higher viewport height(if img hasn't parent width)

so solution using image background, using cover make full page responsive

body {    margin: 0;    background: url("//placehold.it/1920x1080") fixed no-repeat center center / cover  }

`


Comments

Popular posts from this blog

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -