Atom text editor not setting background image - css

Question

I'm trying to set background for my atom text editor from the post
https://discuss.atom.io/t/setting-background-images/9002
I tried the same code and I'm not sure why the editor is not rendering any background image. Can someone please help?
I'm attaching the stylesheet. Styles for setting background is in the last 7 lines of the snippet.
/*
* Code by William Chang and Matt McFarland
* https://medium.com/#docodemore/an-alternative-to-operator-mono-font-6e5d040e1c7e#.ofkdp0aww
* flottflott - http://www.dafont.com/flottflott.font
* Fira Code - https://github.com/tonsky/FiraCode
*/
atom-text-editor {
font-family: 'Fira Code';
font-style: normal;
text-rendering: optimizeLegibility;
}
atom-text-editor.editor {
background: rgba(0,0,0,0);
.syntax--string.syntax--quoted,
.syntax--string.syntax--regexp {
-webkit-font-feature-settings: "liga" off, "calt" off;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js,
.syntax--storage,
.syntax--type .syntax--function {
vertical-align: baseline;
font-family: 'flottflott';
height: inherit;
font-size: 1.5em;
line-height: 1rem;
}
.syntax--storage.syntax--type.syntax--function.syntax--arrow.syntax--js {
font-size: 1.5em;
line-height: 1rem;
}
.syntax--comment {
font-style: italic;
}
.syntax--source.syntax--js.syntax--jsx > .syntax--keyword.syntax--control.syntax--flow.syntax--js {
font-family: 'Fira Code';
font-style: normal;
}
.syntax--string.syntax--unquoted.syntax--js {
color: #CDD3DE;
}
.syntax--entity.syntax--name {
font-weight: bold;
}
}
.pane {
background: url('http://gzhaixier.com/data/out/62/46169594-dark-background-images.jpg');
background-size: cover;
}
.editor {
background: rgba(0,0,0,0);
}
Thank you!