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

Time:11-17

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,iVBORw0KGgoAAAANSUhEUgAAP2IAAAABCAYAAACeV8QgAAAAAXNSR0IArs4c6QAABltJREFUeF7tXcl220gMpH4gcx75GM7/f1CYY5Rz8gOaR8WOtXABGluhCV NpVBVZBpqxz5N03Qdx/E0ZPiaUV4zAM2NcfbE XzOPYQBejX7qRUyGHKl5OVyGdA9IaZVXMBPD1knnUFnT2T5t0NnYhnrR8hOdZ6QCBJlKE5fTqyEi53czJ4AodBQnZjSmT3hyhjXgMx4Zrjp6DJPIE0ipamnWWRc1C4q46/H7Ay76DLvHx zYX2I1cPb5raL/jeevD4f7IEzrXeDJheatWTniXV25BjlFbS0s6uDOeOuJ0Bgg8Cws4dLZRqLu55wwRrXhMZSHD5uZ415HjyxUlCjz tsNlW5HFb8MwOnYZq 1b1oAmN4PkF5d9EEQqaD Md5me5FMShufGIb0yJmhj5jhvK40FwFj0qRF6toVoXyhOZgEQ9YJz2XPFHSxIm7zr2fKlDviTgp/nRWob2hSEOKJVXp7kXB LPUxr72Mpnwu2h5wN4aTx10dtEn4bR11K7nznKuhnWeyKXXIlrlZybME8pzRCirM4JOFc35wzxBGAKPLQLoDkK270X5qjxm8PM7oDT9COl20fSM4w guovCvRbgAOEbYhjqXtRVJWSPfmJDPmN yoXMpaupXJrBeWJVfmNfMMozQl001G4C5wntAf/W611JPeK8PVHKtGhHYI0QQu2sv4sqgtO5vKZSYRSnyccdRKOycwfVXbSVVcP5WiHp5q0PiDi6zr2oLoNVLZYB7/NE7LQ5um  OxxeLJiecBh8zx4AEPYgWn0f0xNW027XVbeBekEfXrrxRFL zVQW8KG iwqwcPmRtbrP5lXiRef7hP7y8zKc/63frcz1I0J8qzf3sKPtolZz7vGw9v0lPGgYW2dby vmPKFNzIHruXoC gGDBid0KG82V08IJuNN1dDo1qC9S3vmB1Z5hYapF1NePRGHbatzHCotpvPUue2ib2f238 x0cimKoIayJM9Y4O4FzUSjaoDNc4IJlxZtF3Uh6BywRbPu2fMrujrahizx2eavl/H8etMVn0tMfBgo2N4avc9UU45HAPliQjJsd836veiERRXT1UG5r3j7Xz2 vMdqtgzFYN5MxCA7O6ihBrN2ljWZoGCAcJCbRVMOk9IKOPmcuOtiAGq600JyRNA/BQUewbaPCFxriS3kY Xll4YvPo08rKS1uYJOQYuW9x4OUJGBWhwjDneQ//uop3NxWdCIUPKoTRfYYS5RM/3okoUHa7M7i7aAyOC54 fys9Ao3j t PXlzcRrPkvAT9coolpeakowpc WcwngYG7Hv/8/jGM41j3ogTajhIStXcchV/bOW1eIFiesJnRVpf qkffi5YLgBh4h3LoXRRIDuu3zeuo68MfYhe1Jryz ljnCTm5no/ Zi9PIHLaHipYeiIxLcos5ypn6YlcTEShxXtyyhNRXrDrK3XZ5i4qLW43NkxlbIqe0dHQ9ryL0hhYthclt41xTTtTUPL71S7K56z3jDpPgCm88ejbvBVe5/fwhNcsPupmm4aP18MTPlr11eVBSb6sIjJ68YQzbSLOV5NBhoi F535OZ2G4Tr/aFV9KTLQbrCed1FFgvVLLUnWLqMOvru78rQ/exfNoY4S6lWktNTvqVGXJH3BNGfMm/mlTwBFLsUeiqUoyLVizD1hwYtFTSGhgJCaJ9rzRE zNpMUmRjwuWb7Llpu bCKBRMWNanWrl2UytRx4jj3olHejeqb3QWtvE3fp v41ej/BraCyi4GCn4y/4 Be2dMlPEKhw8Dszu TdNV63NMsi19xgvukpeNek sWyevqrLH4XkXPSoPdBaZDHHCObF0wOzI5V0UBBx7ms EzQmo41HjBDgRUzm7KCL g8r2IIU2B3WekDpdWxEpHnl eWKHw/4k3zWNnicOSN4uuzkD9DwBOP 9TcuyZIHa70XJLXQCS1MdHglV6l6UQJJTCIrtt3dRFJROolSb2   VbvvKPt046iuz5gNKuWxth3SOE/YzdRghUq5Y4DkiczyZcYe5NQ0u2gQP15tkaxbu iT6kjieBnyqc/DLpqdj z4gzzw3JZ0nmjAWvI0kAaSYuUJjPG0nUmoRwix4kartY4ntNBYsVV1OQywPLEiPboj Pj4GRzO0WNrF0VUKNaTOLtoLA8sZySCyprrPfh/3y3GAeax5B8AAAAASUVORK5CYII=");
}

#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;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="div1"></div>

    <div id="div2"></div>
  </body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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!

CodePudding user response:

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.

  • Related