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:

5 Likes