Creating a Complex Background – Part 3

CSS gradients are special background images, and all of the the properties for controlling backgrounds can be used with them: background-position, background-size, and background-repeat.

Unlike ordinary images, gradients do not have their “own” size, and their size is equal to the size of the element in whose background they are positioned. Of course, this behavior is not suitable for creating ornaments.

Fortunately, we can set the size for the gradient using the background-size property. For example, like this:

background-size: 100px 200px;

This will set all background images to have a width of 100px and height of 200px.

By setting the size for the gradients in the background, we get a fragment of the ornament whose repetition we can control using background-repeat.

In this step, we will first enlarge the container, then specify the size of the background gradients, and finally turn off repeat to see just one piece of the ornament.