Pattern

24px
2px
35%

Preview

CSS

background-color: #f4f8fd;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg opacity='0.35'%3E%3Cpath d='M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z' fill='%232875c5'/%3E%3C/g%3E%3C/svg%3E");

SVG tile

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect width="24" height="24" fill="#f4f8fd"/><g opacity="0.35"><path d="M10 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0Z" fill="#2875c5"/></g></svg>

The CSS repeats one small SVG tile, so it costs almost nothing to load and stays sharp on every screen. The PNG and SVG are full-size backgrounds: 1920 × 1080 for desktops and slides, 1080 × 1920 for stories and 1080 × 1080 for posts.

Free Pattern Background Generator by Hiyaly