Search code examples
xmlevernote

How-to put an image as background in ENML?


May be this question will sound stupid, but I've search, read a lot and haven't found the answer.

I know how to put a image:

<en-media hash="0410523c69dcc74bc103fd5cc638b410" 

style="cursor: default;" type="image/jpeg" />

but is it possible to set an image as a background that can be repeated? and how?

I want to customize Evernote notes.


Solution

  • Evernote for Windows uses WebKit internally to display notes. While some HTML features are deliberately cut off by Evernote they not all lost. Specifically, inline CSS is quite left intact by them.

    So one who knows that en-note tag is mapped to body HTML tag can use inline CSS to manipulate note background. For example here is how to set backgound color for a note:

    1. export it
    2. add backround-color CSS property to en-note inline CSS: <en-note style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; background-color:#6495ed;">

    3. import it

    A more persistent guy may advance to background-image property: <en-note style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; background-image:url('http://<an url to an image on a webserver somewere>');">

    You have to have backgound image somewhere in the internet. There is no way to use image in the note itself; CSS know nothing about en-media and Evernote developers did nothing for it to know.

    But guess what? Evernote users already have free reliable web server - Everenote web interface!

    Create a note in a public notebook. Paste background images in the note. Open the note in the Evernote web interface, navigate to the note, copy image url and use it in background-image. You should end up with something like that: <en-note style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; background-image:url('https://www.evernote.com/shard/s41/res/f53f9eac-59de-4255-9ef0-4cab9f7f0c77/image_1334313119_841920.png')">.

    Tested on Windows and on iPad - it works!