Home Forums ASE Support Using picturefill.js with ASE? Reply To: Using picturefill.js with ASE?


Mark Simchock


I’ll do that. Thanks Michael.

I’m also going to copy / paste some code. Since I’m not sure how GH is gonna treat it, I’ll paste it here as well, just to be safe.

In short, this is a basic / crude version of how I’ve replaced background images, and I can still position and full-cover, etc. I’m not sure if it’s EXACTLY like background, but for me, it’s damn close. The MAJOR difference being, this uses the img tag which then allows for responsive images – via picturefill.js – instead of being forced to use big, bloated, nasty images that suck up bandwidth 😉

Let me know what you think. Frankly, if it comes down to it, I might do a couple custom components so we can be smarter about images, image sizes, and page load, etc.


  margin:10px auto;
  position: relative;

  margin:10px auto

#pic img{
    margin: 0;
    background: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

  /*margin: 0 -50%; */


  <div id="wrapper">
    <div id="pic">
       <img src="img/groove-header-4.jpg">
   <div class="clearfix"> <hr> </div>