formstone/src/docs/background.html

Library of modular front end components.

<h3>Basic</h3>

<!-- START: FIRSTDEMO -->

<style>
  .background {
    width: 100%;

    background: #CFD8DC;
    margin: 0 0 20px;
    padding-top: 50%;
  }
</style>

<div class="demo_container">
  <div class="demo_example">
    <div class="background js-background" data-background-options='{"source":"https://spacehold.it/1600x900/1.jpg","alt":"Background Image"}'></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".background").background({
    source: "http://example.com/image.jpg"
});</code></pre>
  </div>
</div>

<!-- END: FIRSTDEMO -->

<h3>Responsive</h3>
<div class="demo_container">
  <div class="demo_example">
    <div class="background js-background" data-background-options='{"source":{"0px":"https://spacehold.it/800x450/2.jpg","980px":"https://spacehold.it/1600x900/2.jpg"},"alt":"Background Image"}'></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".background").background({
    source: {
        "0px": "http://example.com/image-small.jpg",
        "980px": "http://example.com/image-large.jpg"
    }
});</code></pre>
  </div>
</div>

<h3>Video</h3>
<div class="demo_container">
  <div class="demo_example">
    <div class="background js-background" data-background-options='{"source":{"webm":"https://spacehold.it/video/video.webm","mp4":"https://spacehold.it/video/video.mp4","ogg":"https://spacehold.it/video/video.ogv","poster":"https://spacehold.it/video/poster.jpg"},"alt":"Background Image"}'></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".background").background({
    source: {
        poster: "http://example.com/poster.jpg",
        webm: "http://example.com/video.webm",
        mp4: "http://example.com/video.mp4",
        ogg: "http://example.com/video.ogv"
    }
});</code></pre>
  </div>
</div>

<!-- <h3>YouTube</h3>
<div class="demo_container">
  <div class="demo_example">
    <div class="background js-background" data-background-options='{"source":{"autoPlay":true,"video":"//youtu.be/LlQ8dhdSjWs"},"youtubeOptions":{"start":60},"alt":"Background Image"}'></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".background").background({
    source: {
        poster: "http://example.com/poster.jpg",
        video: "//www.youtube.com/embed/VIDEO_ID"
    }
});</code></pre>
  </div>
</div> -->

<h4>Lazy Load</h4>
<div class="demo_container">
  <div class="demo_example">
    <div class="background js-background" data-background-options='{"source":"https://spacehold.it/1600x900/3.jpg","lazy":true,"alt":"Background Image"}'></div>
  </div>
  <div class="demo_code">
    <pre><code class="language-html">&lt;div class="background"&gt;&lt;/div&gt;</code></pre>
    <pre><code class="language-javascript">$(".background").background({
  lazy: true,
    source: "http://example.com/image.jpg"
});</code></pre>
  </div>
</div>