MagicMirror² v2.13.0 is available! For more information about this release, check out this topic.

Loading an image properly

  • I’m sure this shouldn’t be this hard but I’ve been stuck on it a few hours now. I’m trying to load a transparent background .png with a white image into the mirror.

    I’ve tried loading it as a background img through the custom.css file, which worked except its in the background… (obviously)
    body {
    background-image: url(White.png");
    background-repeat: no-repeat;

    So to get around the manual padding adjustment I’m wondering if there is a way to load in an img into the “Position: top_left” area so any modules also in that area auto adjust?

    I also tried adding to the index.html but that simply resulted in an “X” broken link icon.

  • Project Sponsor Module Developer


    			module: "helloworld",
    			position: "top_left",
    			config: {
    				text: "<img src="path_or_link_to_your_image" />"

  • Thanks for your help strawberry pi.

    I was having additional issues with the code finding the img.
    In case this helps someone else, this is what I ended up with:

    			module: 'helloworld',
    			position: 'top_left',
    			config: {
    				text: "<img src="./config/White.png" />"
    		} ,

Log in to reply