Let’s Create a Complex Background – Final Step

In this step, we will finish creating the ornament. We have already stretched the container to fill the entire mini-browser window to make the ornament more visible. All that we have left to do is make small changes to the base fragment and multiply it.

Let’s return to the topic of multiple backgrounds. Not only are you able to define multiple background images, but you can also control the size, position, and repetition of each one individually. This entry:

background-size: 100px 200px;

will assign the same size to all background images. And this entry:

background-size:
  100px 200px,
  200px 300px,
  300px 400px;

will assign different sizes to all of the background images.

To set different property values for multiple backgrounds, you just need to list these values separated by commas in the same order in which you wrote the images.