Make Cover image Easy Again

I thought this thread could be hard for so called RemNote newbies.
So I made easier one.

Try these steps one by one.

↓ click!

1. Make CSS Template on Custom CSS

↓ CSS Code here. Copy and Paste

[data-document-tags*=""] #DocumentTopRow:before {
	content: "";
	display: block;
	height: 400px;
	margin-bottom: 10px;
	background-size: 100% 100%; 
	/** Change the background-size option to your cover image tastes.**
	➊ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
	➋ background-size: contain; ➞ Height fixed, Responsive to width but some margins can be made.
	➌ background-size: cover; ➞ I don't care about the cover image cropped.
	background-repeat: no-repeat;
	background-position: center;
	background-image: url("");
	background-color: ;

2. Adding image url, Naming the tag

3. Tagging to the Rem-title

4. Adjust `background-size` on your tastes

➊ background-size: 100% 100%; ➞ Full responsive but the image can be ugly.
➋ background-size: contain; ➞ Height fixed, Responsive to width but some margins can be made.
➌ background-size: cover; ➞ I don’t care about the cover image cropped.

Hope new revamped big update version could be more intuitive. :slightly_smiling_face:


I still don’t get it. Could you please elaborate on the steps properly?

Hi, @Hp_96

Kindly refer to the cover photo section in this page


I did everything in the steps. But still don’t get the cover photo for the page. What would be the url link here? Should I import the photo and then copy that photo as rem link. or I can get the url from any web source?

You have to paste the image url link here. The arrow pointing area. The safest way to conserve the cdn link as permanent is saving the image in the synced remnote KB and withdraw url from browser dev tool but wherever you go, the thing is you have to paste some image links over there. Try again if it doesn’t work, pls let me know again

I have a plan to build some automation tool to make this process far more easier than current state, so until then please use this way.

sure definitely, I will try again. Actually, I have been following your css style which is great and I appreciate that. I wondering, will there be any push notification or email notification for the reminder with an API integration. if so, tell me how do I do it?

Currently, only on the roadmap.

since it is definitely a essential feature, maybe the state would be changed if remnote team have some time to build reminder.


Hi. I have the same issue of not being able to add photo cover. I copied and pasted the url link at where you directed. Then copied the tag to the document page as well. But nothing happened :pensive:

Hey, @JRY, could you elaborate on your current situation with a simple captured image?


If you don’t mind, can you make a video of how to create a cover image? I still don’t get it

I uploaded on the readme tutorial. check it again :upside_down_face:

can you see, whenever I type in between the quote. My cursor automatically moving to the other side. It is also happening for other css also.

Yes, you have uploaded the readme version for cover image. But I still don’t get it. I still confused whether my URL is broken or the snippet

Um… To be honest, codeblock has been buggy these days. (after 1.76~ ? )
It wasn’t before, but it seems that the team is running out of hand or meets some walls due to the brand new editor typing system

Type in other editors like sublime text, vscode, anything, And then paste the url or tag name directly into the area. That would be effective

Oh, Thanks for your reply. I must say I’m not into this programming skill. I just follow the instruction as I directed. I copied from other editors and then get back to you

1 Like

Thank you so much. Eureka! :blush:


how did you do it? :000

Do the step as instructed. Copy the snippets from their Github source. For the URL, copy the image address after uploading into your remnote and then paste it. Finally tag it with your document title.

I eventually figured it out! I put a capital letter in the tag, and therefore, the cover page never showed up. It has worked ever since I have all lowercase letters in the tag. :yum:


I did the same steps and it just still doesn’t show the cover.

make sure to check your tag. In my case, all letters in the tag should be lower-cased. Any capital letter will prevent the photo from showing up. Another possibility is that you copied a wrong URL link. The link should end with a picture format (such as jpeg, etc).