Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

              
                <div class="container">
  <article>
  <h1>scroll</h1>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum recusandae ab delectus ex repellendus nesciunt doloribus mollitia, harum dolore quam explicabo exercita Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, facilis earum doloremque, totam ad quae ipsum hic veniam quas. Inventore cum, atque non distinctio natus repudiandae aspernatur asperiores, cumque facere aliquid doloribus autem blanditiis. Ea aliquid alias molestias repudiandae quasi, incidunt sequi soluta quos ratione voluptatem sapiente necessitatibus at maiores consectetur, dolore laudantium! Voluptatem iure ipsam, dolorem consequatur ut quos, saepe laborum velit ab at, veritatis mollitia maxime eveniet doloremque! Quo nihil provident ipsa dolor eius sunt, vitae illum deleniti unde, blanditiis dicta omnis numquam aliquam autem repellendus dolore nostrum laudantium enim tempora? Fuga voluptatibus id neque repellat blanditiis, cum rem quae nobis enim numquam unde, earum excepturi quisquam distinctio iusto nesciunt a vitae consectetur dolorum, nihil nulla ad rerum! Dolor eum laboriosam, repudiandae sit nam consequatur accusantium pariatur, doloremque error quas earum obcaecati reprehenderit. Voluptatum tempore laudantium illum at nemo, culpa alias facilis sapiente praesentium reiciendis eaque accusamus repellendus suscipit, nostrum nam odio repellat debitis, quo corporis sit maxime dolor dolores atque est! Exercitationem maxime repellendus quidem nesciunt eligendi architecto, velit laborum tempore! Quidem commodi ut blanditiis rem unde ipsam voluptas minus provident similique fuga, nobis amet vero adipisci sit molestiae eligendi aperiam iusto expedita quaerat repudiandae? Nobis eos voluptatem sint, fugiat illo dolorum pariatur perspiciatis iure unde nemo eius, laborum, voluptate quaerat vitae itaque quidem aut ducimus atque tenetur excepturi impedit dolor animi doloribus facere. Voluptates voluptatum, quidem, enim provident, id qui esse vitae soluta quas ad neque ipsam at suscipit perspiciatis reiciendis fugit molestiae, deserunt voluptate ducimus expedita. Ad voluptate rem veniam repellat odio. At sit ex sint quis harum ullam eos et vel modi a, eveniet sed magni quod debitis hic, ratione ad eaque pariatur dolore, nobis ducimus expedita earum nostrum. Reprehenderit iste in ullam, magni assumenda, praesentium eum quisquam! Voluptatem, earum et ducimus velit iste nihil repudiandae doloribus distinctio, quod aspernatur dolorum sed eum. Pariatur eos debitis totam neque eum vel nihil cupiditate velit assumenda, rem quod error voluptatem tenetur officia aut fuga animi beatae qui ipsum porro maxime consectetur voluptate vitae tempora. Itaque commodi porro fugiat natus corrupti accusantium architecto quam minus nisi, vitae quas, reiciendis distinctio sint nostrum, voluptatem modi necessitatibus. Rerum iste dolores placeat delectus nesciunt, illum magnam, animi quis, velit quae amet praesentium aliquid incidunt! Expedita, aperiam numquam quos nesciunt unde, minima. Pariatur non dicta facilis? Reiciendis, quis neque iusto autem ab labore maxime fugit sit, sequi non dolorem inventore tenetur error similique et. Rerum obcaecati minus facilis, aspernatur nisi totam omnis delectus harum similique sed vitae aut ut quae, culpa aliquam, animi earum debitis qui quo! Est, pariatur. Aliquid fugiat dignissimos corporis facilis quo aspernatur hic, inventore minus quam deserunt iste. Architecto maiores accusantium doloribus perspiciatis corrupti, ullam nemo, alias placeat eligendi explicabo quae illo numquam. Quod totam illum est nobis itaque magnam? Eaque repellat porro praesentium quidem ad perferendis excepturi cum dicta. Magni neque qui commodi molestias dicta sint nulla earum illo doloribus laudantium ducimus soluta similique sapiente itaque, consequuntur rerum a architecto, omnis veniam ea! Aperiam, commodi, quibusdam. tionem tempora dolores. Eligendi nisi voluptatibus earum beatae ipsum labore. Minus quod sint, fuga alias blanditiis a ipsum, recusandae sequi placeat impedit numquam quam fugiat nemo possimus repudiandae minima veritatis mollitia aliquam, incidunt illo animi voluptate accusamus commodi tempore. Dolorum aut sequi nulla. Sint sit iure at laudantium autem rem ipsum. Asperiores facere cupiditate unde, neque praesentium distinctio, libero laboriosam, quam velit consequatur natus eaque. Saepe, vitae modi animi, libero, ad dolores cupiditate sit quod doloremque voluptatibus sequi temporibus.
  </div>
</article>
</div>
              
            
!

CSS

              
                body {
  font-family: helvetica;    
  line-height: 1.6;
  color: #222;
}

.container {
  max-width: 550px;
  margin: 0 auto;
}

article {
  background-color: #eee;
  height: 300px;  
  margin-bottom: 300px;
  overflow: auto;
  background-image: url(http://assets.css-tricks.ir/images/flower-bg.jpg);
  background-repeat: no-repeat;
  background-size: contain;
  background-attachment: fixed;
  background-position: center 0;
}


h1 {
  color: #fff;
  margin: 1em auto;
  text-align: center;
  text-transform: uppercase;
}

.text {
  width: 320px;
  margin: auto;
  color: #fff;
  background-color: hsla(0,0%,0%,.3);
  padding: 1em;
}
              
            
!

JS

              
                
              
            
!
999px

Console