Backgrounds and Cookies

A couple of years ago, I came across a funny cartoon that used Oreo cookies: the biscuits were labeled as Os and the cream as REs, which were then combined in different ways to generate funny names.

Inspired by that idea, I created a semi-educational video to explain the CSS property background-repeat. In the video, an Oreo cookie rolls in and drops, and then I illustrate the four main values for background-repeat:

• no-repeat: the background image is displayed only once and does not repeat.

• repeat: the background repeats both horizontally and vertically. (In this demo, it looks like it only repeats vertically because the background width matches the container.)

• round: the background image is scaled so that an integer number of images fit across the container. The browser adjusts the size until they fit evenly.

• space: the background image repeats without being clipped. If the image doesn’t fit evenly, the browser distributes extra space between repetitions instead of cutting the image (as with "repeat")

There are also other variations, such as repeat-x, repeat-y, and combinations of the above, but these are essentially derived from these four main values. To keep the cartoon simple, I focused only on those.

Here’s a private CodePen link with the animated version that I used to generate the video. And also a static version of the cartoon (slightly different, but based on the same idea)