html {
  height:100%;
  min-height:100%;
}

.background_index {
  background-position: center center; /* Image is centered vertically and horizontally at all times */
  background-repeat: no-repeat; /* Image doesn't repeat */
  background-attachment: fixed;  /* Makes the image fixed in the viewport so that it doesn't move when the content height is greater than the image height */
  background-size: cover; /* This is what makes the background image rescale based on its container's size */
  background-color:#464646; /* Pick a solid background color that will be displayed while the background image is loading */
}

/* For mobile */
@media only screen and (max-width: 767px) {
  .background_index {
    background-image:url('../images/background_01.jpg'); /* smaller image */
  }
}

/* For desktop */
@media only screen and (min-width: 768px) {
  .background_index {
    background-image:url('../images/background_01.jpg'); /* base image */
  }
}