Archived topic
Animated site BG via html/css
7 replies · Started by will on April 1, 2022
Hello:
I have a question that's way above my head, so to speak, and was hoping you might help.
A client has asked if I might be able to put an animated background in her site -- specifically a night sky with twinkling starts that her site would sit upon.
I found a tutorial on line that seems like just the ticket...but have no idea how to implement it into a Generate Press design, or even if its possible.
The tutorial is here:
https://www.script-tutorials.com/night-sky-with-twinkling-stars/
I have all the materials used in the example -- an index.hml page, a stylesheet called "style.css", a folder of images for the stars, etc.
Is there any way to get Generate Press to load this example into the page background?
Thanks a million!
Hi there,
so there is 3 parts to this.
1. The index.html. This file is not required but the HTML is.
Go to Appearance > Elements and create a new Hook Element. In the hook text area add the HTML:
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>Select the hook wp_footer
And set the Display Rules to Entire Site.
We now have the HTML you need on each and every page of the site.
2. Upload your images to your Media Library. Make a note of their URLS.
3. Add your CSS in the Customizer > Additional CSS or one of the methods provided here:
https://docs.generatepress.com/article/adding-css/
In the CSS you will see several background properties whose URLs will need updating.
Once thats done - we just need to ensure the animated BG sits behind your content. If you can share a link to the site you added to i can take a look at that step.
Hi David
Thanks so much for helping with this!
So, following your directions, I now have the twinkling stars twinkling away.
The problem is, they're not in the body/background, but have replaced the whole site!
I added the css within the main css module in Customize.
Should I have added it elsewhere -- some place that wild have "pointed" it just to the background, or are there some terms within the css I need to change so that the css directs itself to the body/backgound of the site? (Sorry if my terminology is more descriptive than technically proper).
Thank you
OK - we'll thats a good start :)
Back to step 1 - edit the Hook and Change the HTML to:
<div class="stars-background">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="clouds"></div>
</div>And then step 3 - keep the CSS you have and add this too:
.stars-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}You're a wizard. Worked like a charm. Thank you.
One last question -- and totally understand if this is too much, or not do-able.
As it is now, the background of the sky is black.
Is there something I could try that might make it dark blue instead? Or even better a gradation from dark to light blue?
Do you see some line in the CSS that designates that black color, or is your guess that the black color is being bright in with the graphic elements themselves?
But, thank you for helping me all just getting the star background going!
Awesome :)
So this CSS is where the black background is defined:
.stars {
background: #000 url(images/stars.png) repeat top center;
z-index: 0;
}So you could change the #000 hex value to a different color. Or use a linear-gradient BUT.... the .twinkling background image is Black which will stand out like a sore thumb if you shift the color to far from back...
Ahhh. Ok.
I used a color overlay for the twinkling graphic file and matched that color in the background, and voila.
Once again, a zillion thanks, and consider this twinkling quandary solved.
Awesome :) Glad to be of help
