.hero-image {
  background-image: url("photographer.jpg"); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

*Always set a *background-color* to be used if the image is *unavailable*.

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

*By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.