![[identity profile]](https://www.dreamwidth.org/img/silk/identity/openid.png){kind=small}
sireesanwar.livejournal.com posting in ![[community profile]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
layoutloungeAccount 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:
2. Now the body coding, which is almost always at the beginning of all my layouts and usually others as well.
3. Delete the words background image and repeat the url() in the coding separated by a comma.
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.
6. Grad the Direct URL for your background image of choice. Put it in the second set of parenthesis.
7. The background-repeat and the background-attachment will work together on both images and give you the below result...
CLICK HERE
for![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
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.
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.
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.
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%.
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_here8. 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;
}
layout_lounge
(no subject)
Date: 2012-11-20 11:14 pm (UTC)(no subject)
Date: 2012-11-21 12:56 am (UTC)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.
(no subject)
Date: 2012-11-21 01:05 am (UTC)(no subject)
Date: 2012-11-21 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!
(no subject)
Date: 2012-11-21 03:22 am (UTC)(no subject)
Date: 2012-11-21 06:30 pm (UTC)(no subject)
Date: 2012-11-21 06:48 pm (UTC)Have fun and let me know if it worked. (My test did so...)
(no subject)
Date: 2012-11-21 08:49 pm (UTC)look at the prettiness you created (http://x-nothing-here.livejournal.com/) *now I have to upload to own server, but it works!!!
Thank you!!!! :D
(no subject)
Date: 2012-11-21 09:40 pm (UTC)(no subject)
Date: 2012-11-21 10:33 pm (UTC)(no subject)
Date: 2012-11-21 10:48 pm (UTC)(no subject)
Date: 2012-11-21 11:37 pm (UTC)(no subject)
Date: 2012-11-21 08:50 pm (UTC)(no subject)
Date: 2012-11-21 09:40 pm (UTC)(no subject)
Date: 2012-11-21 10:33 pm (UTC)(no subject)
Date: 2012-11-21 10:46 pm (UTC)(no subject)
Date: 2012-11-21 11:55 pm (UTC)(no subject)
Date: 2012-11-21 02:01 am (UTC)(no subject)
Date: 2012-11-21 06:47 pm (UTC)(no subject)
Date: 2012-12-11 03:42 am (UTC)(no subject)
Date: 2012-12-11 11:49 pm (UTC)(no subject)
Date: 2012-12-12 12:09 am (UTC)