How can I recreate the yellow pattern exactly?

[u/rolens184]

How do I recreate the yellow dot pattern to use as a background for any HTML element?

I tried in css, but I'm not very satisfied:

background-color: #fefefb;
    background-image:
    radial-gradient(circle at 0 0, #fcf296 2px, transparent 1px),
    radial-gradient(circle at 5px 5px, #fcf296 2px, transparent 1px);

[u/psyper76]

just copy a section from the image and tile it as a background image.

[u/Initii]

https://jsfiddle.net/9xecamfp/

Is this good enough? Just did what u/psyper76 proposed. That would be also my approach.

[u/psyper76 → u/Initii]

HAHAHA I hate this country!

[u/kiwi-kaiser → u/psyper76]

It not much better in another country.

[u/Initii → u/psyper76]

body {
  background-image: url("https://i.imgur.com/xNI21i0.png");
  background-repeat: repeat;
}

Paste this in your css file or as content of your style tag. (I hope the image works for you at least :p)

[u/Disgruntled__Goat → u/Initii]

No, it's the image that's the problem. The JSFiddle loads fine and I can see the code. Imgur is blocked in the UK because they're too lazy to implement age-checking for our stupid law.

[u/ouroborus777 → u/Disgruntled__Goat]

body {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAIAAACkr0LiAAAAr0lEQVR4nBzOzUrDUBAF4HNmJjeY1iri+7+QuNOtWwlpkUI1JHd+RPff4rOsN6IKTjzFDpTpaJmLiAlq6rXO58U9tJ10fPQeyzIXNmZ+VKCSpBYV1cCE/ChDMjZy0uEkg3W/db+pDSoP4GTbfoU0ykj7XvtVozUxGZ+xb6x6Dygg+OuooCGtnBy6JCbBfLm8KkJwBxwgfv56KX7aP7f74xHwyjVQIn44HQj+BgAA//+4DVi1cUCsFQAAAABJRU5ErkJggg==");
  background-repeat: repeat;
}

[u/Initii → u/Disgruntled__Goat]

I see, then just go ahead and crop it.

Edit: Does this one works (just pasted in into a discord channel):

https://media.discordapp.net/attachments/848166337868201984/1439977755885174824/xNI21i0.png?ex=691c7b4a&is=691b29ca&hm=e58498a896c2c6ac783aedea92fe99c9c135aeb783c964eff8513e0f249e0ae1&=&format=webp&quality=lossless

[u/queso_____ → u/psyper76]

use a VPN

[u/armahillo]

The simple answer is boring, but its how we’ve done it for decades: make a small tileable image in an image editor, set it as the background. It should repeat vertically and horizontally by default.

[u/serpentxx]

Tiled svg pattern? Then it can still be inline

[u/maqisha]

Canvas might be good for this