CodePen

HTML

            
              <html>
  <body>
    <div class="page-wrap">
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas porta elit nec luctus. Mauris sollicitudin convallis metus at pulvinar. Sed lobortis mollis quam sed convallis. Fusce at erat sit amet odio pharetra sollicitudin ac nec elit. Vivamus ultrices dui nulla, sit amet ultrices odio. In ornare eros sed nisl accumsan cursus. Morbi eget tristique odio. Suspendisse imperdiet lorem iaculis augue semper tristique.</p>
      <p>Suspendisse eget justo id odio auctor dictum non sit amet mauris. Cras commodo iaculis varius. Cras venenatis elit a ipsum pellentesque vestibulum. Nam auctor rutrum lobortis. Vivamus semper dui id orci tempus semper. Nullam facilisis tristique malesuada. Fusce sodales sodales ullamcorper. Suspendisse imperdiet augue sit amet metus egestas cursus. In mollis, quam ut sollicitudin luctus, lacus leo faucibus sem, sollicitudin tincidunt metus nunc sed augue. Nam sem massa, molestie cursus aliquet sed, pulvinar sed dolor. Duis pellentesque, neque id porta eleifend, urna justo dictum sapien, vel dapibus arcu eros id libero. Mauris eget erat eu quam egestas porttitor. Maecenas ut dui sit amet turpis semper egestas a et ante. Morbi ac justo ante. Vivamus commodo turpis vitae lacus rutrum lacinia.</p>
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas porta elit nec luctus. Mauris sollicitudin convallis metus at pulvinar. Sed lobortis mollis quam sed convallis. Fusce at erat sit amet odio pharetra sollicitudin ac nec elit. Vivamus ultrices dui nulla, sit amet ultrices odio. In ornare eros sed nisl accumsan cursus. Morbi eget tristique odio. Suspendisse imperdiet lorem iaculis augue semper tristique.</p>
      <p>Suspendisse eget justo id odio auctor dictum non sit amet mauris. Cras commodo iaculis varius. Cras venenatis elit a ipsum pellentesque vestibulum. Nam auctor rutrum lobortis. Vivamus semper dui id orci tempus semper. Nullam facilisis tristique malesuada. Fusce sodales sodales ullamcorper. Suspendisse imperdiet augue sit amet metus egestas cursus. In mollis, quam ut sollicitudin luctus, lacus leo faucibus sem, sollicitudin tincidunt metus nunc sed augue. Nam sem massa, molestie cursus aliquet sed, pulvinar sed dolor. Duis pellentesque, neque id porta eleifend, urna justo dictum sapien, vel dapibus arcu eros id libero. Mauris eget erat eu quam egestas porttitor. Maecenas ut dui sit amet turpis semper egestas a et ante. Morbi ac justo ante. Vivamus commodo turpis vitae lacus rutrum lacinia.</p>
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas porta elit nec luctus. Mauris sollicitudin convallis metus at pulvinar. Sed lobortis mollis quam sed convallis. Fusce at erat sit amet odio pharetra sollicitudin ac nec elit. Vivamus ultrices dui nulla, sit amet ultrices odio. In ornare eros sed nisl accumsan cursus. Morbi eget tristique odio. Suspendisse imperdiet lorem iaculis augue semper tristique.</p>
      <p>Suspendisse eget justo id odio auctor dictum non sit amet mauris. Cras commodo iaculis varius. Cras venenatis elit a ipsum pellentesque vestibulum. Nam auctor rutrum lobortis. Vivamus semper dui id orci tempus semper. Nullam facilisis tristique malesuada. Fusce sodales sodales ullamcorper. Suspendisse imperdiet augue sit amet metus egestas cursus. In mollis, quam ut sollicitudin luctus, lacus leo faucibus sem, sollicitudin tincidunt metus nunc sed augue. Nam sem massa, molestie cursus aliquet sed, pulvinar sed dolor. Duis pellentesque, neque id porta eleifend, urna justo dictum sapien, vel dapibus arcu eros id libero. Mauris eget erat eu quam egestas porttitor. Maecenas ut dui sit amet turpis semper egestas a et ante. Morbi ac justo ante. Vivamus commodo turpis vitae lacus rutrum lacinia.</p>
      <h1>Heading</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas porta elit nec luctus. Mauris sollicitudin convallis metus at pulvinar. Sed lobortis mollis quam sed convallis. Fusce at erat sit amet odio pharetra sollicitudin ac nec elit. Vivamus ultrices dui nulla, sit amet ultrices odio. In ornare eros sed nisl accumsan cursus. Morbi eget tristique odio. Suspendisse imperdiet lorem iaculis augue semper tristique.</p>
      <p>Suspendisse eget justo id odio auctor dictum non sit amet mauris. Cras commodo iaculis varius. Cras venenatis elit a ipsum pellentesque vestibulum. Nam auctor rutrum lobortis. Vivamus semper dui id orci tempus semper. Nullam facilisis tristique malesuada. Fusce sodales sodales ullamcorper. Suspendisse imperdiet augue sit amet metus egestas cursus. In mollis, quam ut sollicitudin luctus, lacus leo faucibus sem, sollicitudin tincidunt metus nunc sed augue. Nam sem massa, molestie cursus aliquet sed, pulvinar sed dolor. Duis pellentesque, neque id porta eleifend, urna justo dictum sapien, vel dapibus arcu eros id libero. Mauris eget erat eu quam egestas porttitor. Maecenas ut dui sit amet turpis semper egestas a et ante. Morbi ac justo ante. Vivamus commodo turpis vitae lacus rutrum lacinia.</p>
    </div>
  </body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  background: #333;
  background-image: url(http://subtlepatterns.com/patterns/tweed.png);
  background-repeat: repeat;
  min-height: 100%;
  background-attachment: fixed;
  color: white;

  &:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    $experimental-support-for-svg: true;
    @include background-image(radial-gradient(center ellipse cover, rgba(black,0) 0%,rgba(black,.9) 100%));
    min-height: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }        
}

.page-wrap {
  width: 50%;
  margin: 0 auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................