example.html

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <title>Caliber - Demo Page</title>
    <link rel="stylesheet" type="text/css" href="ScreenCaliber.css">
    <style type="text/css">
      body, html{ height: 100%; }
      body{ color: #000; background:#efefef;}
      article {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
        float: left;
        font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
        font-size: 1rem;
        font-weight: normal;
        height: 290px;
        line-height: 1.6;
        margin-right: 0;
        margin-top: 72px;
        padding: 18px 17px 18px 18px;
        text-rendering: optimizelegibility;
        width: 215px;
      }
      h3 {
        font-size: 27px;
        font-weight: 400;
        margin: 0;
        padding: 0;
      }
      p {
        margin-top: 6px;
        padding: 0;
      }
      footer a {
        background: none repeat scroll 0 0 #e7e7e7;
        border-radius: 3px;
        font-size: 11px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 10px 20px;
        position: relative;
        top: 6px;
      }
    </style>
  </head>

  <body>

<section>
      <article>
        <header><h3>Tools</h3></header>
        <p>Well, we like to draw. On this site you can find different drawing tools for your pleasure. No matter if you prefer to draw <a>online</a> or <a>offline</a>, all tools are free to use!</p>
        <footer><a>Learn more</a></footer>
      </article>
      <article>
        <header><h3>Art</h3></header>
        <p>Thousands of users have created tons of beautiful drawings using our tools. Explore our massive gallery and get in touch with the world of digital art.</p>
        <footer><a>Top rated drawings</a></footer>
      </article>
      <article>
        <header><h3>People</h3></header>
        <p>Beside posting your art, you can create groups, journal posts and many more. Join a vivid community of people who like to draw and showcase their work.</p>
        <footer><a>Top artists</a></footer>
      </article>
      <article>
        <header><h3>Projects</h3></header>
        <p>In our project-section you can join different projects about various topics. In some projects you can win prizes, others experiment with techniques and visual stuff.</p>
        <footer><a>Projects &amp; Competitions</a></footer>
      </article>
    </section>

  <script type="text/javascript" src="ScreenCaliber.js"></script>
  <script>
    var init = new ScreenCaliber(
      {
        "isActive": true,
        "isVisible": true,
        "screenShotURL": "http://www.cssfly.net/screencaliber/demo/queeky.png",
        "backgroundIdentifier": "body",
          "screenShotRepeat": "no-repeat",
        "screenShotOpacity": 0.5,
        "screenShotLayerPosition": "top"
      });
  </script>

  </body>

</html>