Announcement

**glennrocksvb** · 12-05-2017, 09:34 AM

Try these:

1. Copy the CSS code from codepen and paste into css_additional template. Do not include the first CSS rule (body { background color: #333; } ).
2. Change #snow back to #vb-page-body.
3. Add this code in css_additional. You're basically moving the body background from the codepen to the html tag using your body background image. So their <div> is your <body> and their <body> is your <html>.

Code:

html {
    background: #E3E3E3 url(images/shockernet/metalbg.png) repeat 0 0;
}

4. Save the 3 background images on your server and then update the urls to point to your server.

Code:

background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'),
url('http://www.wearewebstars.dk/codepen/img//s2.png'),
url('http://www.wearewebstars.dk/codepen/img//s3.png');

**alfreema** · 12-05-2017, 11:01 AM

Wow, I didn't expect help on this!

Works awesome on my test theme! Currently it utilizes 100% of the screen, but not 100% of the page, so when you scroll down there is no snow. Is that an easy tweak?

**alfreema** · 12-05-2017, 11:07 AM

Oooh, actually I think I might swap it with #header instead!

Edit: Yes, using "#header" instead of vb-page-body is really nice on my site.

Thanks Glenn!

Announcement

Very cool pure css snow background

Very cool pure css snow background

Comment

Comment

Comment

Users Viewing This Page

Latest Posts