# Background image?

**URL:** <https://discourse.joplinapp.org/t/background-image/15054>\
**Category:** Support\
**Created:** [20 February 2021 22:50 UTC](https://discourse.joplinapp.org/t/background-image/15054 "2021-02-20T22:50:52Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![saarantras](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/saarantras/32/4673_2.png) [@saarantras](https://discourse.joplinapp.org/u/saarantras)\
**Post date:** [20 February 2021 22:50 UTC](https://discourse.joplinapp.org/t/background-image/15054/1 "2021-02-20T22:50:53Z")

</div>

Is it possible to set a background image as part of the GUI theme (not the rendered note)? As in, I would want an image, rather than a solid colour in the background of the GUI.

I tried:

```
body {
background-image: 
url("example.com/whatever.jpg")
}

```

in 'userchrome.css', but to no avail.

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [21 February 2021 00:09 UTC](https://discourse.joplinapp.org/t/background-image/15054/2 "2021-02-21T00:09:25Z")

</div>

What bit of the GUI?

If you wanted to put an image behind the Markdown editor it would take something like:

```css
div.CodeMirror {
     background-image: url("https://example.com/whatever.jpg");
}

```

![link](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/c/c76f1493d4ef7410c4a97c63a842c5774ff53353.png)

You will always need internet access when using this background. However an image could be embedded using a base64 encoded image using something like:

```css
div.CodeMirror {
     background-image: url("data:image/jpg;base64,<enter_the_base64_code_here>");
}

```

![embed](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/3/384bf12a09b509164bb821b073bbff638eb879da.png)

It looks the same but this background image is embedded in the css file and so Joplin will not need internet access. The css file, however, is now **massive** (in this case 407KB). So a small, repeating image would be better.

---

<div class="post-metadata">

**Author:** ![saarantras](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/saarantras/32/4673_2.png) [@saarantras](https://discourse.joplinapp.org/u/saarantras)\
**Post date:** [21 February 2021 03:48 UTC](https://discourse.joplinapp.org/t/background-image/15054/3 "2021-02-21T03:48:24Z")

</div>

> [@dpoulton](#):
>
> If you wanted to put an image behind the Markdown editor it would take something like:

Thanks!  
By doing the following:

```
div.rli-root {
background-image: 
url("/home/(path)/background.jpg");
}

```

I was able to get closer to the desired effect (which is having the image behind the whole GUI: sorry if that was not clear).

Now I just need a way to make the editor and note list's backgrounds transparent (I was able to make the sidebar and edited note backgrounds transparent). **Do you know how I might do that?** I have searched and searched but can't seem to find the right div classes to change (can't find one that works and is not machine generated for the sidebar, and can't find one that allows opacity for the editor).

---

<div class="post-metadata">

**Author:** ![dpoulton](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/dpoulton/32/29723_2.png) [@dpoulton](https://discourse.joplinapp.org/u/dpoulton)\
**Post date:** [21 February 2021 16:19 UTC](https://discourse.joplinapp.org/t/background-image/15054/4 "2021-02-21T16:19:36Z")

</div>

> [@saarantras](#):
>
> Now I just need a way to make the editor and note list's backgrounds transparent .... **Do you know how I might do that?**

I had a quick look and could not see an easy way. Using non-machine generated classes I could get the opacity changed of the entire note-list pane but that also affected the text, so it was not exactly useful. You have obviously grasped the way this sort of thing is done so I guess all you can do is experiment. I have found [this page](https://www.w3schools.com/cssref/css_selectors.asp) useful for helping to devise "stacked" selectors (such as where a particular class is the child of or contained within another element type).

Good luck!!

---

<div class="post-metadata">

**Author:** ![saarantras](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/saarantras/32/4673_2.png) [@saarantras](https://discourse.joplinapp.org/u/saarantras)\
**Post date:** [21 February 2021 18:34 UTC](https://discourse.joplinapp.org/t/background-image/15054/5 "2021-02-21T18:34:55Z")

</div>

Okay, I ended up doing the following :

```
*{
background-color: transparent !important;
}

```

Then restoring individual panels with

```
div.rli-editor{
background-color: rgba(201, 76, 76, 0.3) !important;
}
div.rli-noteList{
background-color: rgba(201, 76, 76, 0.3) !important;
}
div.sidebar{
background-color: rgba(201, 76, 76, 0.3) !important;
}

```

and similar.

I have marked your original answer as the solution, since it's probably what most people searching up this question would want.

Thanks for all you help!

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [21 February 2021 18:52 UTC](https://discourse.joplinapp.org/t/background-image/15054/6 "2021-02-21T18:52:28Z")

</div>

I really would like to see a screenshot of the end result. You really made me curious how this might look like... 😉

---

<div class="post-metadata">

**Author:** ![saarantras](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/saarantras/32/4673_2.png) [@saarantras](https://discourse.joplinapp.org/u/saarantras)\
**Post date:** [26 February 2021 22:51 UTC](https://discourse.joplinapp.org/t/background-image/15054/7 "2021-02-26T22:51:42Z")

</div>

![Selection_060](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/8/81c3f38fa3884df67e75bdc06c38733de0c8b5ff.jpeg)

[Original image from](https://twitter.com/sixveeceear/status/1255252210331660292)

---

<div class="post-metadata">

**Author:** ![tessus](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/tessus/32/13_2.png) [@tessus](https://discourse.joplinapp.org/u/tessus)\
**Post date:** [26 February 2021 23:49 UTC](https://discourse.joplinapp.org/t/background-image/15054/8 "2021-02-26T23:49:22Z")

</div>

Awesome. I like it.

---

<div class="post-metadata">

**Author:** ![myicq](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/myicq/32/7733_2.png) [@myicq](https://discourse.joplinapp.org/u/myicq)\
**Post date:** [13 March 2021 22:15 UTC](https://discourse.joplinapp.org/t/background-image/15054/9 "2021-03-13T22:15:59Z")

</div>

For people coming from Boostnote, here's the code to put into userchrome.css to get the "paper background". I like it a little darker so experiment with the color.

```
div.CodeMirror {
	background-image:url("data:image/png;base64,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") !important;
    background-color : #EAEAEA !important;	
}
```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/3X/1/c/1c948e33314e232a0927789508474d8624f4270b.png) [@system](https://discourse.joplinapp.org/u/system)\
**Post date:** [12 April 2021 22:16 UTC](https://discourse.joplinapp.org/t/background-image/15054/10 "2021-04-12T22:16:33Z")

</div>

Closed on 12 April 2021 22:16 UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.