This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Animate Your Name Forum

View Course

2375 points
571828824b7f51f26c000619_875219903
Submitted by
Maciej Wiercioch
over 3 years ago

Can I change background of animation?

To add extra style to our animation we will use inline (written in .html file) 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 (rgb(255,255,0))
  • HEX (#40E0D0)
  • HSL (hsl(275, 100%, 25%))
  • name of color (slateblue)

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>

background!

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 <canvas> or <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.


Return to Frequently Asked Questions