Page Widget How to - Create Full Page Background Image

Question

We would like to know how to create Full Page Background Image.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html {<!--from  w w w .  ja v a  2  s .c o  m-->
  background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center
    fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>
</head>
<body>
  <!-- Post Info -->
  <div
    style='position: fixed; bottom: 0; left: 0; background: lightgray; width: 100%;'>
    About this SO Question: <a
      href='http://stackoverflow.com/q/18643865/1366033'>How can I
      resize an image so it fits the entire window?</a><br /> Further Reading:
    <a href='http://css-tricks.com/perfect-full-page-background-image/'>Perfect
      Full Page Background Image</a>
    <div>
</body>
</html>

The code above is rendered as follows: