Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- https://css-tricks.com/the-layered-look/ -->

<section class="page-wrap">
  
  <h1>The Layered Look</h1>
  <h2>Better Responsive Images Using Multiple Backgrounds</h2>
  
  <figure>
    <div class="crop-height bg-image bg-image-sedona2">
      <img height="640" width="1024" class="scale transparent" src="https://s.cdpn.io/23379/photo-sedona_512x320.jpg" alt="Sedona" />
    </div> <!-- end .crop-height -->
    <div class="crop-height bg-image bg-image-sedona">
      <img height="640" width="1024" class="scale transparent" src="https://s.cdpn.io/23379/photo-sedona_512x320.jpg" alt="Sedona" />
    </div> <!-- end .crop-height -->
    <figcaption>
      <h4>Single background-image on top, CSS3 multiple backgrounds on bottom.</h4><p>Resize window narrow, <strong>empty cache</strong> &amp; <strong>reload page</strong>, then widen until color swaps in. See how the top background-image flashes as the breakpoint is triggered?</p>
    </figcaption>
  </figure>

</section> <!-- end .page-wrap -->

              
            
!

CSS

              
                .crop-height {
    max-height: 160px;
    height: 160px; /* lt ie8 */
    height: auto;
    overflow: hidden; }

/* base background-image class, specify image below */
.bg-image {
    width: 100%;
    /* prevent scaling past src width (or not) */
    max-width: 1024px;
    /* default background-position */
    background-position: 50% 21%;
    /* lt ie 8 */
    -ms-background-position-x: 50%;
    -ms-background-position-y: 21%;
    /* scale proportionately */
    background-size: cover;
    /* ie8 workaround 
       https://louisremi.github.io/background-size-polyfill/ */ }

/* mobile first (b&w) */
.bg-image-sedona, .bg-image-sedona2 {
    background-image: url(https://s.cdpn.io/23379/photo-sedona_512x320.jpg); }

img.scale, object.scale {
    /* corrects small inline gap at bottom of containing div */
    display: block; 
    width: 100% /* corrects obscure Firefox bug */
    max-width: 100%;
    /* just in case, to force correct aspect ratio */
    height: auto !important;
  display: block; /* corrects small inline gap at bottom of containing div */
  width: 100% /* corrects obscure Firefox bug */
  max-width: 100%;
  /* just in case, to force correct aspect ratio */
  height: auto !important;
  /*width: auto\9; 
  /* ie8+9 - use modernizr instead of this \9 hack */
  /* lt ie8 */
  -ms-interpolation-mode: bicubic; }

.invisible {
    visibility: hidden; }

.transparent {
    /* trigger hasLayout for ie */
    zoom: 1;
    /* 0 value in filters retains layout */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0; }


/* .multiplebgs class added by modernizr.js */

@media
    /* "mama-bear" - plus any-retina */
    only screen and (min-width : 513px),
    only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (        min-device-pixel-ratio: 1.5) {

        /* no-multiplebgs fallback - mid-sized sepia */
        .no-multiplebgs .bg-image-sedona,
        .no-js .bg-image-sedona,
        .bg-image-sedona2 { background-image: url(https://s.cdpn.io/23379/photo-sedona_1024x640.jpg); }

        .multiplebgs .bg-image-sedona {
            background-image:
                /* mid-sized sepia, on top */
                url(https://s.cdpn.io/23379/photo-sedona_1024x640.jpg),
                /* cached mobile-first b&w, on bottom */
                url(https://s.cdpn.io/23379/photo-sedona_512x320.jpg); }
    }

@media
    /* "papa-bear" - size only */
    only screen and (min-width : 704px) {

        /* no-multiplebgs fallback above - mid-sized sepia */
        .bg-image-sedona2 {
            background-image: url(https://s.cdpn.io/23379/photo-sedona_1024x640@2x.jpg); }
  
        .multiplebgs .bg-image-sedona {
            background-image:
                /* high-res color, on top */
                url(https://s.cdpn.io/23379/photo-sedona_1024x640@2x.jpg),
                /* mid-sized sepia, in middle */
                url(https://s.cdpn.io/23379/photo-sedona_1024x640.jpg),
                /* default b&w, on bottom */
                url(https://s.cdpn.io/23379/photo-sedona_512x320.jpg); }
    }


/* Presentational CSS Below */

.page-wrap {
  display: block;
  width: 80%;
  max-width: 1280px;
  margin: 0 auto 2em;
  padding: 1.5em 3em 3em;
  background: #fff;
  text-align: left; }

h1 {
  margin: .5em 0 0 0; }

h2 {
  margin: .25em 0;
  color: #999;
  font-weight: 300; }

figure {
  max-width: 1008px; /* max-width of .bg-image -padding */
  margin: 1.5em 0 .5em; /* change 0 to auto to center */
  padding: 8px 8px 4px 8px;
  background: #eaeaea; }

figcaption {
  margin: .5em 0;
  padding: .125em .5em;
  color: #999;
  text-align: center;
  font-size: 85%;
  font-style: italic; }

code {
  background: lightyellow;
  padding: 1px .25em;
  font-family: Menlo, Monaco, monospace; 
  font-style: normal; }

              
            
!

JS

              
                <!-- CSS media query support for older IE - goes after CSS -->
  <!--[if lt IE 9]>

          <script src="https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

  <![endif]-->
              
            
!
999px

Console