Setting Background Images?


#1

I’m not much of a CSS guy, but I wanted to have a nice background image to use. I accomplished this by using the .editor:before selector, but I’m wondering if there’s better ways to accomplish this…

// snippet from my styles.less
@sapporo_cycling_road: 'http://media-cache-ec0.pinimg.com/originals/39/8a/ff/398aff8e6dcea2befe58f09480857a4b.jpg';
.editor:before {
  content: "";
  background: url(@sapporo_cycling_road)
      no-repeat center center fixed;
  background-size: cover;
  opacity: 0.20;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}

Ends up looking something like this. my current stylesheet here.

Does anyone know of a better selector/practice for how to apply a background image to the editor? Thanks.


#2

Thanks to my coworker, I found a much better solution:

.pane {
  background: url(@sapporo_cycling_road);
  background-size: cover;
}

.editor {
  background: rgba(0, 0, 0, .75);
}

Works like a charm and allows me to set a “filter” on the image.


#3

Thanks for this! I love the subtle papery texture in Brackets’ “Solarized” theme and this will be a fun way to experiment in Atom.


#4

Is there a way to set the background image base on the language / syntax? i.e. Java has it background, CoffeeScript has its own background? Thanks!


#5

Actually, I found the way.

@java: "file:///path-to-java-image.jpg";
@coffee: "file:///path-to-coffee-image.jpg";
    
.editor[data-grammar="source java"] {
        background: url(@java) no-repeat center;
        background-size: 100%;
        z-index: 1;
    }

.editor[data-grammar="source coffee"] {
    background: url(@coffee) no-repeat center;
    background-size: 100%;
    z-index: 1;
}