'What is the best way to make a background-div which spreads over the full page (not window)? Goal is to make animations moving across the whole page
My question is specific for Angular, but if it is possible to do it just by CSS all answers are welcome!
The landing-page I am working on right now has many sections (each a component). They are below each other with different colours, which makes it appear to have horizontal lines as dividers - quite boring in my opinion.
I want to spice it up with some SVG animations, which should spread and move "across those borders", e.g. start at the very top-right corner of the page and go to the bottom-left corner seamlessly. (For clarification: I do not talk about window/screen corners, but the full page.)
- What is the best way to do something like this?
- In Angular, where should I put such a component and the css for this?
- How to manage situations where a component has a background-colour and makes the SVG's invisible?
So far, I created an <app-full-page-background-component> and put the already existing landing page components inside of its template. Then I started to experiment with the styles there. But I don't really think it is a good/the best approach...
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|