Base64 background image in multiple lines?

Question

Is it possible to put base64 background image in multiple lines instead of one long line? If so, how?

My current body CSS is:

body {
  background-color:  #FFFFFF;
  background-image:  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZSURBVBhXY/iABP4jAQYqSiCbi2wsA/UkAIeAuaFCb0TzAAAAAElFTkSuQmCC);
  background-repeat: repeat;
  height: 100%;
}

Why don't you just try breaking your base64 data in separate lines? You have no enclosing quotes or whatsoever, so just try inserting a \n somewhere. — Cyrille, Jul 09 '12 at 15:29
@Cyrille - Because `\n` (a new line separator) is just not enough - see answer bellow. — Ωmega, Jul 09 '12 at 15:37
Didn't read anywhere that you had tried that ;) Glad you found a solution though. — Cyrille, Jul 09 '12 at 15:38

score 25 · Accepted Answer · answered Jul 09 '12 at 15:32

25

Put your code between quotes and put a backslash before breaking to new line.

body {
    background-color:  #FFFFFF;
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUg\
    AAAAgAAAAICAIAAABLbSncAAAAAXNSR0IArs4c6QAAAARnQ\
    U1BAACxjwv8YQUAAAAJcEhZcwAADs\
    MAAA7DAcdvqGQAAAAZSURBVBhXY/iABP4j\
    AQYqSiCbi2wsA/UkAIeAuaFCb0TzAAAAAElFTkSuQmCC');
    background-repeat: repeat;
    height: 100%;
}

answered Jul 09 '12 at 15:32

Nikola K.

7,093
13
31
39

This causes Firefox's CSS rule inspector to break. Even though the page renders normally, the developer tools are broken in Firefox 57. – Quolonel Questions Jan 05 '18 at 14:13

Base64 background image in multiple lines?

1 Answers1

Linked