We switched to a manual approval system for registration on this forum, as this makes it easier to keep bots out of the forum. We'll approve everybody who doesn't look like a bot!

Custom CSS to add background to images

I have lots of PNG images of equations to be displayed inside my zettels; they're essentially black text on a transparent background.

On light themes all is fine but on dark themes the black text is practically invisible on the dark background of the page.

The first solution I tried is to substitute the transparent background with a solid color not too dark and not too bright so that it can adapt in both light and dark themes without being disturbing.
It works but it's a sort of compromise so I want to investigate the following alternative: use a custom CSS to add, only for dark themes, a background color to <img> tag boxes. That should solve my problem with equation images and should not have any impact on images that don't have any transparent zones.

Only problem is, I know almost nothing about CSS and so far my attempts failed miserably.
Is the described solution feasable? If so what custom CSS should I use?

Comments

  • Use the following code snippet. Replace "white" with whatever colour you like, it will replace the transparency with the respective colour!

    body.dark .CodeMirror img { background-color: white; }
    
  • That did the trick!
    Thanks fro your help.

  • You're welcome! :)

Sign In or Register to comment.