Вот еще одна версия с conic-gradient()
, которая должна работать в последней версии Edge в соответствии с: https://caniuse.com/#feat = css -coni c -градиентов
html {
height:100%;
/* fallback for firefox */
background:
radial-gradient(#000 0.5px,transparent 0.5px) 0 0 /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 1px 1px /3px 3px,
radial-gradient(#000 0.5px,transparent 0.5px) 2px 2px /3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
/**/
background:
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 0 0 /3px 3px,
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 1px 1px/3px 3px,
conic-gradient(from -90deg at 1px 1px,#000 0 90deg,transparent 0) 2px 2px/3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}
Вы также можете рассматривать маленький SVG в качестве фона, и он будет работать везде:
html {
height:100%;
background:
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 0 0 /3px 3px,
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 1px 1px/3px 3px,
url('data:image/svg+xml;utf8,<svg viewBox="0 0 3 3" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" /></svg>') 2px 2px/3px 3px,
url(https://i.picsum.photos/id/102/800/800.jpg) center/cover;
}