backstretch

[chharvey]

instead of slapping an image randomly onto the About page, use a responsive, well-placed backstretch image.

inspiration: http://www.codersknowwhy.com/

[chharvey]

draft:

#backdrop {
  position: absolute;
  top: 3rem;
  z-index: -2;
  width: 100%;
  height: 24rem;
  background-image: url('images/axel_and_me.jpg');
  background-size: 300%;
  background-repeat: no-repeat;
  background-position: 75% 50%;
}
@media screen and (min-width: 30em) {
  #backdrop {
    background-size: 200%;
    background-position: 75% 25%;
  }
}
@media screen and (min-width: 45em) {
  #backdrop {
    background-size: 150%;
  }
}
@media screen and (min-width: 60em) {
  #backdrop {
    background-size: cover;
  }
}