?

Log in

No account? Create an account
 
 
20 November 2012 @ 02:57 pm
Falling Snow Background/Multiple Backgrounds  
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;
}

 
 
 
alias: castle [come again?]x_nothing_here on November 20th, 2012 11:14 pm (UTC)
what if you have a current fixed background image, but want the snow falling across entire page?
Jill aka Jo: Hug: Andromeda hugged a Perseidsireesanwar on November 21st, 2012 12:56 am (UTC)
So you don't want it over the background image but rather over the whole journal? Because the above solution will allow you to add this falling snow over your current fixed background image so you have two.

Let me see if I can find something but I'm guessing the best bet is to add it as a background image to the content section and then make sure the maincontent, subcontent, and sidebar are transparent.
alias: castle [congrats awesome]x_nothing_here on November 21st, 2012 01:05 am (UTC)
My background image is fixed, no-repeat, but the snow has to be 'repeat' so that's what I wanted to know is it possible?
Jill aka Jo: OUaT: Hook and crocodilesireesanwar on November 21st, 2012 01:10 am (UTC)
You can have your background as fixed and repeat which solves the issue. The coding above will do this. Just have it on repeat but keep the background attachment on fixed and it should work.

Nevermind. I see your dilemma. Let me see what I can do.

And I LOVE your background!

Edited at 2012-11-21 01:10 am (UTC)
alias: castle [call beckett]x_nothing_here on November 21st, 2012 03:22 am (UTC)
Have I trumped the great sireesanwar :o???
Jill aka Jo: Holiday: Ornamentssireesanwar on November 21st, 2012 06:30 pm (UTC)
*evil laugh* NO! I think I actually have the solution... just need to test it. Give me a little time... should have the solution posted above shortly.
Jill aka Jo: Happy: Cas Tee Hee SPNsireesanwar on November 21st, 2012 06:48 pm (UTC)
*happy dance* I edited the post and added a solution just for you. HEHEHEHE

Have fun and let me know if it worked. (My test did so...)
alias: castle [bulletproof]x_nothing_here on November 21st, 2012 08:49 pm (UTC)
It works, had to tweak it to my 'settings' but YAY

look at the prettiness you created *now I have to upload to own server, but it works!!!

Thank you!!!! :D
Jill aka Jo: Fringe: Lincolnsireesanwar on November 21st, 2012 09:40 pm (UTC)
I'm very happy for you! And I checked it out. Looks good.
alias: wtp [eeyore hunny]x_nothing_here on November 21st, 2012 10:33 pm (UTC)
Thanks :). Eeyore has snow on him...think he's grumpy lol.
Jill aka Josireesanwar on November 21st, 2012 10:48 pm (UTC)
lol You know I have a cousin in law that totally reminds me of Eeyore and he does this impression that is hilarious. Also, I love Eeyore. LOL
aliasx_nothing_here on November 21st, 2012 11:37 pm (UTC)
Hahhaa thats awesome
aliasx_nothing_here on November 21st, 2012 08:50 pm (UTC)
ps the second 'repeat' should be 'no-repeat'?
Jill aka Josireesanwar on November 21st, 2012 09:40 pm (UTC)
For your images, yes.
alias: castle [congrats awesome]x_nothing_here on November 21st, 2012 10:33 pm (UTC)
I figured it out. Because I'm awesome lol
Jill aka Jo: Misc: Calvin YAYsireesanwar on November 21st, 2012 10:46 pm (UTC)
*thumbs up*
aliasx_nothing_here on November 21st, 2012 11:55 pm (UTC)
Haha lots of hit and miss especially when changing colours and spacing. but i figure it out...eventually
yuuri21yuuri21 on November 21st, 2012 02:01 am (UTC)
thank you~ I was waiting for the Christmas layout to come out for a while now to get ready to change it after Thanksgiving was over. :D
Jill aka Jo: Holiday: Christimas Lightssireesanwar on November 21st, 2012 06:47 pm (UTC)
I'm about to post a Christmas Layout which you can see above. It will be up sometime today.
Fairyscarletladyy on December 11th, 2012 03:42 am (UTC)
Thank you so much for this! After recently changing my layout, I've finally realised how to apply it! ♥
Jill aka Josireesanwar on December 11th, 2012 11:49 pm (UTC)
I'm very glad you got it to work. I love the background on your layout.
Fairyscarletladyy on December 12th, 2012 12:09 am (UTC)
Me too :D Thank you! :)