<!-- Life's Not Complete Without Art. (expand your editor ;) 
                                 |
                               \ ' /
                             -- (*) --
                                >*<
                               >0<@<
                              >>>@<<*
                             >@>*<0<<<
                            >*>>@<<<@<<
                           >@>>0<<<*<<@<
                          >*>>0<<@<<<@<<<
                         >@>>*<<@<>*<<0<*<
           \*/          >0>>*<<@<>0><<*<@<<
       ___\\U//___     >*>>@><0<<*>>@><*<0<<
       |\\ | | \\|    >@>>0<*<0>>@<<0<<<*<@<<  
       | \\| | _(UU)_ >((*))_>0><*<0><@<<<0<*<
       |\ \| || / //||.*.*.*.|>>@<<*<<@>><0<<<
       |\\_|_|&&_// ||*.*.*.*|_\\db//_               
       """"|'.'.'.|~~|.*.*.*|     ___|___
           |'.'.'.|   ^^^^^^|____|>>TMR>>|
           ~~~~~~~~         '""""`-------'
 

|X-Mas Tree & Presents|
!-->

<body>
		<div id="bgContainer">
			<canvas id="canvasBG" width="800" height="500"></canvas>
		<div>
		<div id="main_body">
			<div class="page">
				<div class="content">
					<p>Happy Holidays!<br />  
					</p>
				</div>
			</div>
		</div>
	</body>
   
@import url(https://fonts.googleapis.com/css?family=Mountains+of+Christmas:700);

body {
				margin: 0;
				padding: 0;
				font-family: 'Mountains of Christmas', cursive;
				font-weight:bold;
				font-size:4vw;
				color: #fff;
				width:100%;
}
canvas {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
       
			}
			#bgContainer {
				position: absolute;
				height: 100%;
				width: 100%;
				background-color: #999;
          overflow: hidden;
			}
			#main_body {
				position: absolute;
				top: 0;
				width: 100%;
				overflow: auto;
				max-height: 100%;
				left:50%;
				top:50%;
				transform:translate(-50%, -50%);
          overflow: hidden;
			}
			p {
				line-height: 1.5em;
				letter-spacing:2px;
				text-align:center;
         	text-shadow: 0 3px 0 #ccc,
               0 4px 0 #c9c9c9,
               0 5px 0 #bbb,
               0 6px 0 #b9b9b9,
               0 7px 0 #aaa,
               0 8px 4px rgba(0,0,0,.1),
               0 0 8px rgba(0,0,0,.1),
               0 4px 6px rgba(0,0,0,.3),
               0 6px 8px rgba(0,0,0,.2),
               0 8px 13px rgba(0,0,0,.25),
               0 13px 13px rgba(0,0,0,.2),
               0 22px 22px rgba(0,0,0,.15);
			}
			.page {
				width:100%;
				margin: 0 auto;
			}
			.content {
				font-size:2.5em;
				opacity:0.5;
				filter:alpha(opacity=60);
				border: none;
				-moz-border-radius: 5px; 
				-webkit-border-radius: 5px;
				margin-bottom: 5px;
       
			}
//call AnimateBG();

$(document).ready(function() {
	new AnimateBG("canvasBG", "http://sd.uploads.im/t/z7xY4.png").start();
});

//the canvas background animation script (animatebg.js) is included as a seperate file -->
//URL: https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/animatebg.js
//the image used is for the static snowflakes.  The js animates the canvas background

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/animatebg.js