Search code examples
cssbackground-image

background-image repeat pattern is showing side effects when pattern size is small

I am trying to create a table pattern using background image, it works fine when cell size is 50px * 50px but when I go below 25px * 25px few rows start to disappear or get fainted.

What is the reason behind this & how can it be fixed?

At 25px * 25px

At 50px * 50px 

div {
  background: pink;
  height: 713px;
  width: 400px;
  background-size: 25px 25px;
  /*background-size: 50px 50px;*/
  background-image: url("https://svgshare.com/i/_GG.svg");
}
<div></div>

codepen: https://codepen.io/arnavsingh/pen/bGWPqXP

Note: It gets fixed when I zoom in using browser settings

Solution

  • such task is now trivial with only one gradient:

    div {
  background: pink;
  height: 713px;
  width: 400px;
  --b:1px; /* adjust this */
  background:
    conic-gradient(at bottom var(--b) right var(--b),#000 75%,#0000 0) 
    0 0/25px 25px /* and this */
    pink;
}
    <div></div>