Novice playing with an animated canvas background

[enderandrew]

I'm trying to do an experiment to determine whether or not an animated background can work and not be too distracting. The problem I'm having is that I need an opaque div in the middle for content, and it always appears transparent. I don't want the animated canvas element interfering with the content. I tried putting in opacity:1.0 for the div, and it is still transparent.

Here is an example:

http://enderandrew.net/wave4.html

[JAB Creations]

The link to your demo is not working.

In general if something is not the focus of a person's attention the less distracting it is the less obnoxious they will think your page is.

That does not mean however you can't have an animated background however the first bit does imply basic common sense to make it work. I would highly recommend something that animates slowly and does not have too much contrasting colors for example. Personally I think this would be rather niche, if most people notice it then it's likely to be distracting and most people will think it obnoxious and avoid your site in the future while if you pull off the animated background in a design-oriented fashion only a small percentage of people may notice the work. Not to discourage you though when you build something the most important question you should ask yourself is if it is ultimately conductive to my goals? Yes situations would include though not be limited to already being rich enough in RL that you can easily spend time freely experimenting or a client is paying you well to test this theory; it's up to you to determine the no though generally progress is made by figuring out when the 0.1% of the time saying yes is conductive to your personal long term interests. One more yes, if it's the easiest way to approach learning something for your personal site then if you think (in this specific case) you can pull it off in an aesthetically pleasing way then I think it's worth your time learning on your own. I think either way it's an interesting goal at least from both technological and design perspectives. Hope this helps.