<!DOCTYPE html>
<html>
    <head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <title>Merry Christmas!</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cacpg.herokuapp.com/js/demos/snowfall.min.js"></script>
<script>
$(document).ready(function() {
    snowFall.snow($("section"), {
        minSize: 1,
        maxSize: 8,
        round: true,
        minSpeed: 1,
        maxSpeed: 3,
        flakeCount: 120
    });
});
</script>
    </head>
    <body>
    
    <!-- Add your heading below this line -->
    <section>
      <h1 style="color:red">Merry Christmas!</h1>
      <h2 style="color:red">圣诞节快乐</h2>
      
      
    </section>
    <!-- I'm a comment! You won't see me on the page! -->
    
    </body>
</html>
@import url(http://fonts.googleapis.com/css?family=Lobster);
section {
    /* You will add new style rules here */
    background: url(https://lh5.googleusercontent.com/-QiJakmvg4Hc/UrgnDlkYw9I/AAAAAAAAF_8/iSqPi8NjGpc/w730-h487-no/IMG_0510.JPG);
   width: 700px;
   height: 500px;
   color:white;
   font-family: Lobster;
   position:relative;
   margin:auto;
}
h1 {
    font-size: 48px;
    position:absolute;
    margin:0;
    top:350px;
    left:190px;
}
h2 { 
    font-size: 36px;
    position: absolute;
    margin: 0;
    top: 400px;
    left: 250px;
}
img { 
    position: absolute;
    top: 200px;
    left: 120px;
}
body {
    background: darkslategrey;
}








Browse more Codebits