html, body {
  background-color: #000;
  height: 100%;
}

html {
  margin: 0;
  padding: 0;
}

body, html {
  background-image: url(../images/IMG_9285.JPG);
  background-size: cover;                      /* <------ */
  background-repeat: no-repeat;
  background-position: center left;            /* optionally, center the image */
}

body {
  color: #FFFFFF;
  text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
  margin: 0 auto;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  line-height: 1.2em;
  font-size: 2em;
  padding: 1.4em 2em;
  text-align: center;
  overflow: hidden;
}
.avatar { display: none; border-radius: 290px; width: 290px; height: 290px; overflow: hidden; margin: 0px auto 50px auto; }
.avatar img { width: 100%; }
a { color: #F55; }
p { background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; }

@media screen and (max-width : 767px) {
  body, html { 
    background-position: center; 
  }
  body { font-size: 1.2rem; line-height: 1.8rem }
  p.whoami { margin-top: 15rem }
  p { margin: 0 0 1rem 0; padding: 0.5rem }
  .hidden {
    display: none;
  }
}

@media screen and (min-width : 768px) {
  body { font-size: 1.4rem; line-height: 2.2rem }
  p { margin: 0 0 1rem 0; padding: 0.5rem; width: 350px; }
}