How to use CSS to achieve a beautiful seamless background image

When we make a seamless pattern with multiple objects, we need to handle the case where the objects are on the border. Often we create copies of objects and place them in place to make the collage work seamlessly.

When we make a seamless pattern with multiple objects, we need to handle the case where the objects are on the border. Often we create copies of objects and place them in place to make the collage work seamlessly. 

In CSS, there is a way to do this without manually creating a copy or doing any calculations for the position, by utilizing the CSS background property.

Backgrounds in CSS are repeatable by default, and if we create objects with background or background-image, they can automatically tile regardless of their position.

element {
  background-image:
    radial-gradient(#6155a6 30%, transparent 0);


  /* default */
  background-size: 100% 100%;
  background-repeat: repeat;
}

Create a patterned background

We start by specifying the size of the fragments for tiling. This is an essential step as it determines the repeatable space of the pattern.

element {
  width: 180px;
  height: 180px;
}

Create a circular object with a radial-gradient in the background.

element {
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(#6155a6 30%, transparent 0);
}

Even if you can't see the edges, the circles will tile correctly. Use background-position to move it somewhere else. Don't worry about crossing the border, the browser has already done it for us.

element {
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(#6155a6 30%, transparent 0);
  background-position: -110px -20px;
}

We can add more objects by adding more background images.

element {
  width: 180px;
  height: 180px;
  background-image:
    radial-gradient(#6155a6 30%, transparent 0),
    radial-gradient(#6155a6 20%, transparent 0),
    radial-gradient(#6155a6 10%, transparent 0);
  background-position:
    -110px -20px,
    -20px -75px,
    20px 40px;
}

This element can be used to make seamless patterns by tiling. The only problem is that the elements themselves cannot be tiled as easily as background images. We need to create many identical elements and place them in the grid. Although taking a screenshot of the element and saving it in PNG format is a quick solution.

Doodle with CSS

One of the exciting features that css-doodle provides is the ability to use the @doodle function to generate a background image from another css-doodle element. If we create pattern fragment in css-doodle, it can be used for background image. This means that pattern fragments can be tiled.

/* container size */
@grid: 1 / 100% 180px;


/* pattern dimension */
background-size: 180px 180px;


/* pattern fragment */
background-image: @doodle(
  @grid: 1 / 100%;
  background-image:
    radial-gradient(#6155a6 30%, transparent 0),
    radial-gradient(#6155a6 20%, transparent 0),
    radial-gradient(#6155a6 5%, transparent 0);
  background-position:
    -110px -20px,
    -20px -75px,
    20px 40px;
);

 

Using gradients to create shapes is fairly limited. Fortunately, @doodle functions can be nested. For example, we can replace one of the circular objects created by radial-gradient with another css-doodle element, inside which is a heart rotated 30 degrees.

/* pattern fragment */
background-image: @doodle(
  background-image:
    @doodle(
      @grid: 1 / 100%;
      @size: 80px;
      margin: auto;
      background: pink;
      @shape: heart;
      transform: rotate(30deg);
    ),
    radial-gradient(#6155a6 20%, transparent 0),
    radial-gradient(#6155a6 5%, transparent 0);
  background-position:
    -110px -20px,
    -20px -75px,
    20px 40px;
);

 

How to use it in actual development

I recommend using design tools like Photoshop and AI to create patterned backgrounds, but it's still fun to create something directly from code. So here are two ways to apply it to your site:

1). Create a pattern background fragment in CSS or css-doodle and capture the DOM element, or use the export() API of css-doodle to save the pattern fragment as an image.

.container {
  background-image: url(pattern.png);
  background-size: /* fragment size */;
}

2) Import and use css-doodle directly.

<style>
  css-doodle {
    --pattern: (
      /* your code */
    );
  }
</style>
<css-doodle use="var(--pattern)"></css-doodle>

I hope this article has explained well how we can create seamless background patterns using CSS background-repeating and css-doodle. There are countless ways to form objects, so I can imagine this is a very useful technique.

Of course, in the end we choose which method to implement, all based on our specific development projects and the technology we have mastered.