@import 'atomic-squirrel/variables';

.bg-grass {
  background-image: url('/assets/images/grass.jpg');
}

.bg-rocket-launch {
  background-image: url('/assets/images/rocket-launching.jpg');
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-fixed {
  background-attachment: fixed;
}

// Workaround because mobile browsers don't support background-attachment: 
// "fixed". See http://stackoverflow.com/a/19045667/483528
@media screen and (max-width: 40em) {
  .bg-rocket-launch {
    background-size: 215% !important;
    background-attachment: scroll !important;
    background-position: center 0 !important;    
  }
}

.bg-cover {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
}

.bg-translucent-white {
  background-color: rgba(255, 255, 255, 0.90);
}
@import 'atomic-squirrel/variables';

.bg-grass {
  background-image: url('/assets/images/grass.jpg');
}

.bg-rocket-launch {
  background-image: url('/assets/images/rocket-launching.jpg');
}

.bg-repeat {
  background-repeat: repeat;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

.bg-fixed {
  background-attachment: fixed;
}

// Workaround because mobile browsers don't support background-attachment: 
// "fixed". See http://stackoverflow.com/a/19045667/483528
@media screen and (max-width: 40em) {
  .bg-rocket-launch {
    background-size: 215% !important;
    background-attachment: scroll !important;
    background-position: center 0 !important;    
  }
}

.bg-cover {
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center center;
}

.bg-translucent-white {
  background: rgb(255, 255, 255);
  background-color: rgba(255, 255, 255, 0.90);
}
Add background fallback for IE
Add background fallback for IE
