What I’m trying to do
I really like banners on notes, and I’m trying to create a simple way to insert them. With this model:
![image | banner](image.png), I want to apply this snippet on the image:
I’m not good at CSS, I’m doing it with a lot of search.
The image showed with its entire width, and a half of height, so that it looks like a banner on the top of the note. I thought
object-fit: cover; would crop the image within its aspect ratio. It won’t work.
Things I have tried
The CSS above.
I’d look into SlRvb’s image adjustment snippet. There are a few options for
banner type sizes, and lots of options for other things you may want to do ready to go.
@cReisz here’s another good css snippet for banner
Copy the snippet here:
Github - CSS Banners, Icons (Experimental), and other Image Options
With the help of @efemkay’s banner image code in this thread, I managed to make a snippet that enables banner images (which come in 3 styles that can be toggled with the Style Settings plug-in). The banner height can be changed with Style Settings as well.
In addition, the snippet allows circular profile-esque images, page icon images (Warning: experimental feature that is commented out by default, and…
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.