Falling Snow Background/Multiple Backgrounds

[sireesanwar]

Account Status: Free
Actions: Falling Snow over your Background image
Theme: Flexible Squares but should work for other layouts

Okay so the idea is that you want snow on our journal during the Christmas holiday or throughout the winter season but you don't know how to accomplish it. Or you have another transparent active gif you want to lay over a background on your journal.

Here is how to accomplish it and it is really easy.

Let's say we want to accomplish this:


Click Image to see Live Preview


1. Let's start with our images



2. Now the body coding, which is almost always at the beginning of all my layouts and usually others as well.
body{
background-color: #000000;
background-image: url(BACKGROUND IMAGE);
background-repeat: repeat;
background-attachment: fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

3. Delete the words background image and repeat the url() in the coding separated by a comma.
body{
background-color: #000000;
background-image: url(), url();
background-repeat: repeat;
background-attachment: fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

4. Then we need to save both images to Photobucket ( Image Tutorial).

5. Grab the Direct URL for the falling snow. Put it in the first set of parenthesis.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url();
background-repeat: repeat;
background-attachment: fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

6. Grad the Direct URL for your background image of choice. Put it in the second set of parenthesis.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url(Backgrond URL Goes Here);
background-repeat: repeat;
background-attachment: fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

7. The background-repeat and the background-attachment will work together on both images and give you the below result...
CLICK HERE

for x_nothing_here
8. But say you have a background image that is fixed and not repeated but you want the snow to repeat across your page. You are going to need to add a second repeat/no-repeat to the "background-repeat" coding.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url(Backgrond URL Goes Here);
background-repeat: repeat, repeat;
background-attachment: fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

9. And if you want one image to be fixed and one to scroll then you'll have to add that to the "background-attachment" coding.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url(Backgrond URL Goes Here);
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

10. You can also add a background-position line with the same idea. But this is only necessary if you have a image that is fixed and on no-repeat. You don't need to add a second position for the Snow if you want it to repeat.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url(Backgrond URL Goes Here);
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
background-position: left top, right center;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}

11. You can also add a background-size line. This is usually necessary if you want to use a very large image that doesn't quite fill the screen but doesn't look quite right on repeat. Options: inherit, cover (fills screen), contain (fills screen but might cut off some image), length such as 10px 100px, or percentage such as 10% 50%.
body{
background-color: #000000;
background-image: url(Snow URL Goes Here), url(Backgrond URL Goes Here);
background-repeat: repeat, repeat;
background-attachment: scroll, fixed;
background-position: left top, right center;
background-size: inherit;
color: #888888;
font-family: "trebuchet ms", arial, sans-serif;
font-size: 12px;
margin: 0px 0 20px 0;
}