Can I change background of animation?
To add extra style to our animation we will use inline (written in
CSS code. If you want to know more about that language, please take a HTML & CSS course.
In this operation, the property
background-color will be useful. The value of this property, a color, might be presented in different ways:
- RGB (
- HEX (
- HSL (
hsl(275, 100%, 25%))
- name of color (
We can change the background color of our animation or of the whole page. In the first case we have to add our
CSS code to the
<canvas> element in this way:
<canvas style="background-color: #B0C4DE;" id="myCanvas"></canvas>
If you want to apply changes to the whole page you have to style the
<body> element, for example:
<body style="background-color: thistle;">
But, if you do not like solid colors, instead of
background-color you can use the property
background-image. The value of this propety should be a link to an image. As before, you can apply this style to
<body> element. Sample usage:
<canvas style="background-image: url('http://thepatternlibrary.com/img/a.jpg');" id="myCanvas"></canvas>
More amazing patterns to use freely in your projects you can find at Pattern Library.