Background Repeat

The new background-repeat property.

The lower examples are from ishadeed.com.

8. Using the new background-repeat property: round. This stretches a repeating image so it fits in a space without being clipped. This image is 55px x 55px so it won't fit perfectly inside the 250px square box.'

.round {
    background-image: url(/images/round.png);
    background-repeat: round;
}

9

9. Using the new background-blend-mode: multiply on the container, rather bizarrely, makes the text blend, rather than the background below.

.round {
    background-image: url(/images/round.png);
    background-repeat: round;
    background-blend-mode: multiply;
    display: grid;
    place-items: center;
}
.round h1 {
    color: blue;
    font-size: 250px;
    margin: 0;
}

10

10. This time using mix-blend-mode: multiply makes everything blend.

.round {
    mix-blend-mode: multiply;
}

?

Conclusion

So what exactly is background-blend-mode useful for? It seems if you have a textured backgound like on this page and you want everything to be blended to it applying background-blend-mode will affect all elements placed upon it.

See also Page 35