<div class="bck" >Image Loaded From S3</div>
<div class="piio-bck" data-piio-bck="https://s3-us-west-1.amazonaws.com/piio-test/blog/noah-rosenfield-41542-unsplash.jpg" >Image Loaded From Piio</div>


<!-- Including Piio Script -->
<script type="application/javascript"> var piioData = {appKey: 'demo', encodeSrc: false, domain: 'http://www.piio.co/', removeQueryString: false }</script> <script src="https://js.piio.co/demo/piio.min.js"></script>
.bck {
  background-image: url(https://s3-us-west-1.amazonaws.com/piio-test/blog/bird-bck-2048w.jpg); 
  float:left;
  height: 200px;
  width:50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

@media screen and (max-width: 1024px) {
  .bck {
    background-image: url(https://s3-us-west-1.amazonaws.com/piio-test/blog/bird-bck-1024w.jpg); 
  }
}

.piio-bck {
  float:left;
  height: 200px;
  width:50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body {
  font:'Quicksand', sans-serif;
  color:white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.