Why Chrome / Brave does not render background-image of a div over a certain width? How to fix?

Question

I have a generated image that is over 16000 x1 pixels in size. I would like these to be repeated vertically, so as to create a grid. I set that image (base64 data url) as the background-image of a div.

For an image 16226px wide, it works great. For one 16958px, chrome / brave renders a white background.

See the repro below:

body {
  font-family: sans-serif;
}

#div1 {
  margin: 10px;
  height: 100px;
  width: 16226px;
  border: 1px solid #000;
  background-image: url("data:image/png;base64,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");
}

#div2 {
  margin: 10px;
  height: 100px;
  width: 16958px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAQj4AAAABCAYAAAAIyb0SAAAAAXNSR0IArs4c6QAABgpJREFUeF7tnEty40gMRKkLTO89W/n+F/J2vJ+5gCdohS1SElmJKvwL3hqFT+YrNhF09OXj4+Prer1elmQ/60Bf4Ex4LB4Jln4Ik87f19XPqZWVt7c3PMnwOMMJ8F4ni5RW9vPzcyGxoqm/9PAKsyQY4VellZWM/wYpYNBVIjI7bO8rmiJo1uoiQvqQjQBsrEjLkyW/jc0s6p2yoj0XsR4xnEUviyRe5qznioX7tJqeWFHfg4yHNy7/DYqHHmjELovrnZk6DByPOdWOakfALbkLfJ5tfGfm0IsjhxexM82y17TeV7wwJt/HKMXFirxHRxVGvWt1zp2/WDlXnFvvlr8svxdq+sbK+wX/KgtMQ+qVFAwUny1ETz/yd+bJrNBzwr+wc+3M5fwIkeM780h1vrOZKPA6S73b8vGaPdM3K+/XC/wHh9kFUZ9P+imC5EdilsXNcwVrV93JKnhXwA0rs5gS+E5E2Jm/5Q2hcYgmu2/lXDtzt0x5Dg7grLUz31scaDaPYyEnyfa+MgOJVjNmYyXkhQ3SdF5WrG5fEOM72szLSocY6Y7w3hfSzsxbOp0z2QdKuTMX0yLYau3MIs1X0o0C8hek3leiANfBQvNIM2AnTrEShRX7Pu+s0Biz77w60FbA6rnih0xqJ9R4bUfl6pF2Zrk2XGWub1ev7djuzPPeGFeoqjaz9/ycAJmduahTNVypmNX7itJ4QctQbrveiD5ZqeeSHgF4JTtWJuEh0Zh2rOA8Y5HBTAnW7upB7cwYia2ogNa3Rnr6fcrvzGQViAdIYJCCTxrhykOY9aGkzM78qh+DWQmyVGhbgRjvK8VZ20n5iBisEHUQQus8LbEoMXyrwMBRopD78IysYFpiUbi43PnwylqRGVnR0k6jzpZAaxrn2JmtVSZQxdIqS5IkO7OMFjtxFEoQCHIRSt6ZS0MXvvE2gZnK/75yr4t1wDu1m2wJhyezklADN3yhjRh5QGYFnccizkjDp1G99MHsgT0rQYS1atOq7gvO5tiZmS+YQToPyMh+Z/YwoYGxAiU9KEnemX91YOqeKY2APY5TSojWzmn/vuLYEu3W2nZpd7SrV6zoyO8cA0iEYgWRKYPTyJznMcXKuIZyGR4ZtWW2dmaq05hfWBS1tnz8Wd+yO7PwbFENEZZFKn17Z9YxRKeKlIpz5F3/Dfr3r7/nGLamfK0AeFH//PfPcr1e1+j6cagAaKNK57UHqcjcLiIFBWPe6Vhh1K4NQJAIUJPamYP4CbX58yrxBUW3g/YQkXdmkMF2HxVxpoC2zEi99s5cnpYCNwWme19xZDxyl7XaRXrxywrSvZaSVaeeK8UARQG/zxXKFJ2x9ehqCreVqHbmplynAaFwIzb7GE7emcek3ZwmNs5Wl5AoQIuEaQ61R8c83Jl9/ZlNnyR16q4ACsSJZlO/rxRLJAWmYeX3XjFcMJLCo8Gv+7WYQoIVizlGHanzbQUkWGlXrYhjBfzetBg7s1/9Hj2P0yn9vtrtzPRe+U9kdpZfrfrOfKYpyBIYxu/emlGveL2vSDio559E97eczzOMs5JBFznFvWTmcGmclU41OJo/Ki2Zu3Nc/mP6Q5qxwi9eZexSAGfO3c6Mt/6kzKujA+m6lM98aO6dmdHZCaCsnZlhZ2ZETjTVIM/1viLqTqrkxYqknYMXWbK1jtzFyqNoufztQOLwSLHCqaZQLif4utuZheSutOMKTL0zO7mv4y7qZHi1M3uQ0EMPKp9wXQyKsVbvKxudpH2Tzo9Z3h11ZyX4IN0KGB0MKDfbc+V09oDCGCH0uqwP/bas+OjIlUnBm+F1NOzODMkABQXnQa99+s5c+uu440/n+s6s4zxaxR8h987Z3m1RMSrOmQI4nW1W8FzOREjQji/t26wkkLxGYFGgWGGRcYokyM7s60n4Y8toV6Pnp8BjNyR9Z46pUZEx7tttZ36/LEvr/3C/qV2aj2vuPsOByfW+4t65sQYZL3exMmYF+TSjd+TagweKlUEBgePyeMhXWMfMxIqOYgAcrkL4VEF2ZlejHzXDJ0mIcS2a1NiZs9qYda4jDv8HNmunAaj+7NgAAAAASUVORK5CYII=");
  border: 1px solid #000;
}

You can also see it here:

https://codesandbox.io/s/kind-dewdney-hgjx3?file=/src/styles.css

I checked the larger image is valid by pasting the generated images into an base 64 viewer such as https://jaredwinick.github.io/base64-image-viewer/

How can I display the larger images and have them repeated vertically? I could use img elements, but I am trying not to have one img element per pixel. I could also paint each line over and over and make a larger image to display inside an img element, but the background-image approach would be preferable.

Am I doing something wrong here?

Thanks!

user_10867454 · Answer

Your second div shows OK on Firefox but it seems there is no standard minimum length that a browser must support.

For example, MDN says:

Length limitations Although Firefox supports data URLs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limited URLs to 65535 characters long which limits data URLs to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a MIME type).

I haven't found a specific definition of the length for Chrome, but it sort of looks as though it might be 16KB (16384 (edit) pixels, see comment) which seems rather small nowadays. Hopefully someone can find a definitive statement on this.

Why Chrome / Brave does not render background-image of a div over a certain width? How to fix?

1 Answers