Atom Editor Background Image

Today spent some time to customize Atom user stylesheet to display the background image for editor.
Background image is a feature that I expected so much in either TextMate or Sublime.
Now finally I have it in Atom.

Finding the class for each html component is a little bit tricky
My theme is seti-ui.

Stylesheet to display background image

//.react is needed to avoid impact on mini-editor
.editor.react {
  // Fix the color strip between gutter and the editing area.
  background: #0e1112;

  .scroll-view {
    // Align the Background Image with Editing Area
    padding-left: 0;
    margin-left: 10px;

    // I put the background image under ~/.atom/images
    background: url('/Users/timnew/.atom/images/batou.jpg') no-repeat fixed;

    // Stretch the image
    // I tried to set it in with other background properties,
    // but it doesn't work. Looks like a bug in Chrome.
    background-size: cover;
  }

  .cursor-line {
    // Set cursor-line semi-transparent to make background visible.
    // Adjust the alpha value to fit your taste.
    background: rgba(90,90,90,.4) !important;
  }

  .overlayer {
    // Set overlayer semi-transparent to make background visible.
    // Adjust the alpha value to fit your taste.
    background-color: rgba(21, 23, 24, .7) !important;
  }
}

Screenshots

Without TreeView

With TreeView